@layer component { theme-modal:not([data-popup-container]) > details, [data-mount-modal], [data-theme-modal]:not([data-popup-container]) > details { --z-index: var(--z-index-modal); } theme-modal:not([data-popup-container]) > details[open]::before, [data-mount-modal][open]::before, [data-theme-modal]:not([data-popup-container]) > details[open]::before { position: fixed; inset: 0; z-index: var(--z-index); display: block; width: 100vw; height: 100vh; content: ""; background-color: rgb(var(--color-mask), 0.4); } theme-modal:not([data-popup-container]) > details:not([open]) > summary + :not(details, summary), [data-mount-modal]:not([open]) > summary + :not(details, summary), [data-theme-modal]:not([data-popup-container]) > details:not([open]) > summary + :not(details, summary) { display: none !important; } theme-modal:not([data-popup-container]) > details > summary + :not(details, summary), [data-mount-modal] > summary + :not(details, summary), [data-theme-modal]:not([data-popup-container]) > details > summary + :not(details, summary) { position: fixed; inset: 0; z-index: calc(var(--z-index) + 1); width: fit-content; height: fit-content; margin: auto; background-color: rgba( var(--color-background, var(--color-page-background, 255, 255, 255)) ); animation-duration: 0.2s; animation-timing-function: ease; } @media (max-width: 959px) { theme-modal:not([data-popup-container]) > details > summary + :not(details, summary), [data-mount-modal] > summary + :not(details, summary), [data-theme-modal]:not([data-popup-container]) > details > summary + :not(details, summary) { --modal-animation-name: animation-slide-in-bottom; inset-block: auto 0; width: 100vw; } } :not([data-popup-container])[data-placement="left"] > summary + :not(details, summary), :not([data-popup-container])[data-placement="left"] > details > summary + :not(details, summary) { --modal-animation-name: animation-slide-in-left; inset-inline: 0 auto; width: auto; height: 100%; } :not([data-popup-container])[data-placement="right"] > summary + :not(details, summary), :not([data-popup-container])[data-placement="right"] > details > summary + :not(details, summary) { --modal-animation-name: animation-slide-in-right; inset-inline: auto 0; width: auto; height: 100%; } :not([data-popup-container])[data-placement="top"] > summary + :not(details, summary), :not([data-popup-container])[data-placement="top"] > details > summary + :not(details, summary) { --modal-animation-name: animation-slide-in-top; inset-block: 0 auto; width: 100vw; } :not([data-popup-container])[data-placement="bottom"] > summary + :not(details, summary), :not([data-popup-container])[data-placement="bottom"] > details > summary + :not(details, summary) { --modal-animation-name: animation-slide-in-bottom; inset-block: auto 0; width: 100vw; } .modal__content { background-color: rgba( var(--color-background, var(--color-page-background)) ); border-color: rgba(var(--color-text), var(--modal-border-opacity)); border-style: solid; border-width: var(--modal-border-thickness); border-radius: var(--modal-border-radius); box-shadow: var(--modal-shadow-offset-x) var(--modal-shadow-offset-y) var(--modal-shadow-blur) rgba(var(--color-shadow), var(--modal-shadow-opacity)); } .modal__close-control { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 10; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: rgb(var(--color-light-text)); cursor: pointer; background-color: transparent; border: 1px solid currentcolor; border-radius: 50%; transition: opacity 0.2s; } .modal__close-control:hover { opacity: 0.6; } @media (min-width: 960px) { .modal__close-control { inset-block-start: 20px; inset-inline-end: 20px; width: 38px; height: 38px; } } }