.modal{--modal-animation-duration:.25s;width:auto;max-width:none;height:auto;max-height:none;color:inherit;transition:display var(--modal-animation-duration) allow-discrete, overlay var(--modal-animation-duration) allow-discrete;background-color:#0000;border:none;place-items:center;margin:0;padding:0;inset:0;overflow:hidden}.modal::backdrop{transition:background-color var(--modal-animation-duration) ease-in-out;background-color:#00000080}.modal:not([open])::backdrop{background-color:#0000}.modal[open]{display:grid}@starting-style{.modal[open]::backdrop{background-color:#0000}}@starting-style{.modal[open] .modal__box{opacity:0;scale:.95}}.modal__box{background-color:var(--color-surface-card);border:1px solid var(--color-surface-border);opacity:1;width:min(95dvw,45rem);max-height:calc(100dvh - 2rem);transition:scale var(--modal-animation-duration) ease-in-out, opacity var(--modal-animation-duration) ease-in-out;border-radius:.5rem;grid-template-rows:auto 1fr auto;display:grid;scale:1}.modal__box[data-size=small]{width:min(95dvw,35rem)}.modal__box[data-size=large]{width:min(95dvw,55rem)}.modal__box[data-size=full]{width:calc(100dvw - 2rem);height:calc(100dvh - 2rem)}.modal__header{justify-content:space-between;align-items:center;column-gap:1rem;padding-block-start:2rem;padding-inline:2rem;display:flex}.modal__title{font-size:1.5rem;font-weight:500}.modal__close-button{border:1px solid #0000;border-radius:.25rem;place-items:center;width:2rem;height:2rem;margin-inline-start:auto;font-size:1.25rem;display:grid}.modal__close-button:hover{border-color:var(--color-surface-button)}.modal__content{scrollbar-width:thin;padding:2rem;overflow-y:auto}.modal__footer{padding-block-end:2rem;padding-inline:2rem}.modal:not([open]) .modal__box{opacity:0;scale:.95}