/* Every rule that hides or shows a `.btn` names the root too: component CSS is emitted before
   app.css in the same `components` layer, so a one-class `.share-box__x { display: none }` lost to
   `.btn { display: inline-flex }` — "Zdieľať video" and "Stiahnuť video" showed (dead) while the
   video was still rendering (QA R2-7). */
@layer components {
    .share-box__panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding-block: var(--space-4);

        &[hidden] {
            display: none;
        }

        &:focus {
            outline: none;
        }
    }

    .share-box__title {
        margin: 0;
        font-size: var(--text-h4);
    }

    .share-box__media {
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Four options do not fit one row of a phone: two by two there, one row from 34rem. */
    @media (width < 34rem) {
        .share-box__media .seg {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .share-box__media .seg-opt {
            border-left: 0;

            &:nth-child(even) {
                border-left: 1px solid var(--color-divider);
            }

            &:nth-child(n + 3) {
                border-top: 1px solid var(--color-divider);
            }
        }
    }

    /* The video's format, only in the Video medium. Two long labels: side by side where they fit,
       stacked full-width on a narrow phone — each option stays a ≥44 px target (.seg-opt). */
    .share-box__video-formats {
        display: none;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .share-box[data-medium='video'] .share-box__video-formats {
        display: block;
    }

    .share-box__video-formats-legend {
        margin-block-end: var(--space-1);
        padding: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    @media (width < 24rem) {
        .share-box__video-formats .seg {
            display: grid;
            grid-template-columns: 1fr;
        }

        .share-box__video-formats .seg-opt + .seg-opt {
            border-left: 0;
            border-top: 1px solid var(--color-divider);
        }
    }

    /* The photos switch: one for every export (images and videos), only for a profile with photos. A ≥44 px target. */
    .share-box__photos {
        display: none;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 44px;
    }

    .share-box[data-photos='shown'],
    .share-box[data-photos='hidden'] {
        &[data-medium='story'] .share-box__photos,
        &[data-medium='square'] .share-box__photos,
        &[data-medium='video'] .share-box__photos {
            display: flex;
        }
    }

    .share-box__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* Only where the browser can share a file; elsewhere the download is the primary way out. */
    .share-box .share-box__share {
        display: none;
    }

    .share-box[data-share-available='true'] .share-box__share {
        display: inline-flex;
    }

    /* Nothing to hand over yet (rendering, failed, or outdated): one look for every medium. The
       download links have no href and aria-disabled; the buttons stay focusable and their handler
       says why nothing happens. Revoking a link is always possible. */
    .share-box a.btn[aria-disabled='true'] {
        opacity: 0.55;
        pointer-events: none;
    }

    .share-box[data-actionable='false'] .share-box__actions .btn:not(.share-box__link-revoke, .share-box__link-reshare) {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* The challenge's block: only for its profile; the panorama button only when opened from the editor. */
    .share-box__challenge,
    .share-box[data-editor='none'] .share-box__join,
    .share-box[data-contest-entry='entered'] .share-box__join,
    .share-box[data-contest-entry='entered'] .share-box__challenge-note,
    .share-box[data-contest-entry='none'] .share-box__challenge-entered {
        display: none;
    }

    .share-box[data-hashtag='offered'] .share-box__challenge {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .share-box__challenge-title {
        margin: 0;
        color: var(--color-accent-2-700);
        font-weight: 600;
    }

    .share-box__challenge-entered {
        margin: 0;
        font-weight: 600;
    }

    .share-box__challenge-note {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    /* The challenge's hashtag: only for its profile, beside the story's image or its 9:16 video. */
    .share-box__hashtag {
        display: none;
        margin: 0;
    }

    .share-box[data-hashtag='offered'][data-medium='story'] .share-box__hashtag,
    .share-box[data-hashtag='offered'][data-medium='video'][data-video-format='story'] .share-box__hashtag {
        display: block;
    }

    /* One group of buttons per kind of medium; the controller writes data-medium on the root. */
    .share-box__actions--video,
    .share-box__actions--link {
        display: none;
    }

    .share-box[data-medium='video'] {
        .share-box__actions--image {
            display: none;
        }

        .share-box__actions--video {
            display: flex;
        }
    }

    .share-box[data-medium='link'] {
        .share-box__actions--image {
            display: none;
        }

        .share-box__actions--link {
            display: flex;
        }
    }

    /* The video's buttons only once it is rendered; "Zdieľať video" only where an MP4 can be shared. */
    .share-box .share-box__video-share,
    .share-box .share-box__video-download {
        display: none;
    }

    .share-box[data-video-state='ready'] .share-box__video-download {
        display: inline-flex;
    }

    .share-box[data-video-state='ready'][data-video-share-available='true'] .share-box__video-share {
        display: inline-flex;
    }

    .share-box__link {
        flex: 1 1 100%;
    }

    .share-box__link-output {
        inline-size: 100%;
    }

    .share-box .share-box__link-copy,
    .share-box .share-box__link-share,
    .share-box .share-box__link-revoke,
    .share-box .share-box__link-reshare {
        display: none;
    }

    .share-box[data-link-state='revoked'] .share-box__link-reshare {
        display: inline-flex;
    }

    .share-box[data-link-state='ready'] {
        .share-box__link-copy,
        .share-box__link-revoke {
            display: inline-flex;
        }

        &[data-link-share-available='true'] .share-box__link-share {
            display: inline-flex;
        }
    }

    /* "Ukázať fotky v odkaze": the link tab of a shared profile with photos (data-link-photos on/off). */
    .share-box__link-photos {
        display: none;
    }

    .share-box[data-medium='link'][data-link-photos='on'],
    .share-box[data-medium='link'][data-link-photos='off'] {
        .share-box__link-photos {
            display: block;
        }
    }

    .share-box .share-box__retry[hidden] {
        display: none;
    }

    .share-box__retry,
    .share-box__refresh {
        align-self: flex-start;
    }

    .share-box .share-box__refresh {
        display: none;
    }

    .share-box[data-freshness='outdated'] .share-box__refresh {
        display: inline-flex;
    }

    /* Revoked: "Zdieľať znova" is the one action (it saves unsaved changes itself). */
    .share-box[data-medium='link'][data-link-state='revoked'] .share-box__refresh {
        display: none;
    }

    /* The video's progress (user request 2026-10-31): a thin newsprint rule filling with the
       accent, the percentage beside it. Only while the chosen video is on its way; without a
       report yet (queued) a short segment sweeps instead of claiming a number. */
    .share-box__progress {
        display: none;
        align-items: center;
        gap: var(--space-2);
    }

    .share-box[data-medium='video'][data-video-state='pending'] .share-box__progress {
        display: flex;
    }

    .share-box__progress-track {
        position: relative;
        flex: 1 1 auto;
        block-size: 0.375rem;
        overflow: hidden;
        background: var(--color-neutral-200);
    }

    .share-box__progress-fill {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: var(--share-box-progress, 0%);
        background: var(--color-accent);
        transition: inline-size 0.4s ease-out;
    }

    .share-box__progress[data-progress='indeterminate'] .share-box__progress-fill {
        inline-size: 30%;
        animation: share-box-progress-sweep 1.6s ease-in-out infinite alternate;
    }

    .share-box__progress-value {
        flex: none;
        min-inline-size: 3.5ch;
        color: var(--color-text-muted);
        font-size: var(--text-s);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    @keyframes share-box-progress-sweep {
        from {
            inset-inline-start: 0;
        }

        to {
            inset-inline-start: 70%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .share-box__progress-fill {
            transition: none;
        }

        .share-box__progress[data-progress='indeterminate'] .share-box__progress-fill {
            animation: none;
            inline-size: 100%;
            opacity: 0.35;
        }
    }
}