/**
 * Lightbox
 */

/* Layout is scoped to `[open]`: the closed dialog stays in the markup so a no-JS link has
   a target, but a UA `dialog:not([open])` is `display:none` and must keep winning, so
   nothing here sets `display` on the base selector. */
.lightbox {
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    border: 0;
    background: transparent;

    &[open] {
        display: grid;
        place-items: center;
    }

    /* The design fills the viewport behind an enlarged element with Hellgrau, not with a
       dark scrim. `::backdrop` inherits from its originating element, so the token
       resolves here. */
    &::backdrop {
        background: var(--sav-color-hellgrau);
    }
}

/* The same disc the components carry to open the lightbox, pinned to the viewport corner
   over the backdrop. It sits on Hellgrau there, so it carries the page's white to stay
   legible. The design sets it 30.5px from the top and 33.5px from the right; one even
   value for both. */
.lightbox__close {
    position: fixed;
    inset-block-start: 2rem;
    inset-inline-end: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    border: 0;
    border-radius: 50%;
    background: var(--sav-color-weiss);
    color: var(--sav-color-dunkelblau);
    cursor: pointer;

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    /* The inlined icon carries its own `currentColor`, so it takes the disc's colour and
       the hover with it; only the size belongs here. */
    & .icon {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }
}

/* Names the dialog for assistive tech without showing on screen. */
.lightbox__close-label,
.lightbox__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}