@layer block {
    .share-box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        width: 100%;
        max-width: var(--preview-max-inline, 22rem);

        /* Both buttons carry their own progress: a card video is a ten to
           thirty second render, and a button is where the visitor is already
           looking. Drawn on ::after the way UI:StylePicker does it, so nothing
           has to be added to UI:Button's markup — and in `currentcolor`, so the
           same rule works on the dark primary, the outlined secondary and the
           muted link the download becomes once sharing is available. */
        & .share-box__share,
        & .share-box__download {
            position: relative;
            justify-content: center;
            text-align: center;

            &::after {
                content: "";
                position: absolute;
                inset-block: 0;
                inset-inline-start: var(--space-2);
                margin-block: auto;
                width: 1rem;
                height: 1rem;
                border: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
                border-top-color: currentcolor;
                border-radius: var(--radius-full);
                opacity: 0;
                transition: opacity var(--transition-fast);
            }

            &[data-loading="true"]::after {
                opacity: 1;
                animation: share-box-spin 700ms linear infinite;
            }
        }

        /* Hidden by default rather than by a `hidden` attribute: the rules that
           reveal it and the rules that rearrange everything else around it hang
           off the same state, so they belong together. */
        & .share-box__share {
            display: none;
        }

        & .share-box__media {
            display: none;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            padding: 0.125rem;
            background: var(--color-bg-subtle);
        }

        /* A segmented control drawn from two radios, so the keyboard and the
           screen reader get a real radio group and the CSS gets the state for
           free from :checked. */
        & .share-box__medium {
            flex: 1;
            display: block;
            border-radius: var(--radius-full);
            padding-block: var(--space-1);
            font-family: var(--font-ui);
            font-size: var(--text-ui-button);
            font-weight: var(--weight-button);
            line-height: var(--leading-button);
            color: var(--color-text-muted);
            text-align: center;
            cursor: pointer;

            & input {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip-path: inset(50%);
            }

            &:has(input:checked) {
                background: var(--color-bg-elevated);
                color: var(--color-text);
                box-shadow: var(--shadow-sm);
            }

            /* The focus ring has to come from here: the input it belongs to is
               clipped down to a pixel. */
            &:has(input:focus-visible) {
                outline: 2px solid var(--color-text);
                outline-offset: 2px;
            }
        }

        & .share-box__status {
            min-height: var(--leading-label);
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            color: var(--color-text-muted);
            text-align: center;
        }

        & .share-box__social {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-2);
            margin-top: var(--space-1);
            list-style: none;
        }

        & .share-box__channel {
            display: grid;
            place-items: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: var(--radius-full);
            /* The brand colour is an inline custom property, the same exception
               UI:StylePicker takes with --style-bg: it is a constant of somebody
               else's brand, not a value of our design system. */
            color: var(--channel-color, var(--color-text));
            background: var(--color-bg-subtle);
            transition: transform var(--transition-fast), background var(--transition-fast);

            &:hover,
            &:focus-visible {
                transform: translateY(-2px);
                background: var(--color-bg-elevated);
            }
        }

        & .share-box__icon {
            width: 1.25rem;
            height: 1.25rem;
        }

        /* Where navigator.share() exists the download link drops to a quiet
           secondary action; the share sheet is the whole point of the page. */
        &[data-share-available="true"] {
            & .share-box__share {
                display: block;
            }

            & .share-box__download {
                order: 1;
                background: none;
                border-color: transparent;
                color: var(--color-text-muted);
                font-size: var(--text-label-caps);
            }
        }

        /* Only once a controller is polling for one is there a second thing to
           choose between. Set back to "false" when the render gives up, which
           takes the choice away again rather than leaving a dead option. */
        &[data-video-available="true"] .share-box__media {
            display: flex;
        }

        /* The chosen medium is not on disk yet. The download keeps its place in
           the layout — nothing jumps — but it cannot be followed to a file that
           is not there. Dimmed rather than greyed out flat: it now spins and
           says "Video sa pripravuje…", so the opacity only has to read as "not
           yet", not carry the whole message. The share button deliberately
           stays live — it is the one thing that can explain the wait, and a
           spinner on a dead button reads as a hang. */
        &[data-media-pending="true"] .share-box__download {
            pointer-events: none;
            opacity: 0.6;
        }
    }

    @keyframes share-box-spin {
        to {
            rotate: 360deg;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .share-box .share-box__share[data-loading="true"]::after,
        .share-box .share-box__download[data-loading="true"]::after {
            animation: none;
        }
    }
}