@layer reset, tokens, base, layout, components, pages, utilities;

@layer components {
    .banner-carousel {
        position: relative;
        overflow: hidden;
        min-height: 48px;
        margin-bottom: var(--space-4);
        border-radius: var(--radius-lg);
        background: var(--color-primary);
        /* Navy: a white focus ring, inside the controls (it clips them). */
        --focus-ring: var(--color-focus-on-dark);
    }

    .banner-carousel :focus-visible {
        outline-offset: -3px;
    }

    .banner-carousel__track {
        display: flex;
        min-height: 48px;
        transition: transform var(--duration-slide) ease;
    }

    .banner-carousel__slide {
        min-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-3);
        /* The bottom is the strip the pause button and the dots sit in
           (24px, WCAG 2.5.8, and 4px of air), so a wrapped line never runs under them. */
        padding: var(--space-2) var(--space-6) 28px;
        box-sizing: border-box;
        color: var(--color-white);
        font-size: var(--text-xs);
        text-align: center;
    }

    .banner-carousel__title {
        font-weight: 700;
    }

    .banner-carousel__desc {
        opacity: 0.9;
    }

    /* ~~struck~~ text in a title or description. line-through is the UA default for
       <del>, but stated outright so a later reset can't quietly drop it. */
    .banner-carousel__title del,
    .banner-carousel__desc del {
        text-decoration: line-through;
        text-decoration-thickness: 2px;
        opacity: 0.75;
    }

    .banner-carousel__link {
        color: var(--color-white);
        text-decoration: underline;
        font-weight: 600;
        margin-left: var(--space-1);
    }

    .banner-carousel__link:hover {
        opacity: 0.8;
    }

    /* .carousel-arrow .carousel-arrow--on-dark, the full height of each end. */
    .banner-carousel__prev,
    .banner-carousel__next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 var(--space-2);
        height: 100%;
    }

    .banner-carousel__prev { left: 0; }

    .banner-carousel__next { right: 0; }

    /* The dots, after the pause button, along the banner's bottom edge:
       the 24px button fills the strip and the dots sit in its lower part
       (5px dots 4px from the bottom, as they always did). */
    .banner-carousel__dots {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: flex-end;
        gap: 6px;
    }

    /*
     * Pause / play: two bars while the banners rotate, a triangle once
     * stopped (aria-pressed="true"). Drawn in CSS: its name is its
     * aria-label, which stays "Pause announcements" while the pressed
     * state says whether they are paused.
     */
    .banner-carousel__pause {
        position: relative;
        width: 24px;
        height: 24px;
        /* 2px each side: the group is as wide as when the button was 20px,
           so the symbol and the dots stay where they were. */
        margin-inline: -2px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .banner-carousel__pause::before {
        content: "";
        position: absolute;
        top: 13.5px;
        left: 9px;
        width: 6px;
        height: 8px;
        border-inline: 2px solid var(--color-white);
    }

    .banner-carousel__pause[aria-pressed="true"]::before {
        left: 10px;
        width: 0;
        height: 0;
        border-inline: 0;
        border-left: 6px solid var(--color-white);
        border-block: 4px solid transparent;
    }

    .banner-carousel__pause:focus-visible {
        outline-width: 2px;
        outline-offset: -2px;
    }

    .banner-carousel__dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.6);
        background: transparent;
        padding: 0;
        margin-bottom: 4px;
        cursor: pointer;
        transition: background var(--duration-base);
    }

    /* A dot is 5px: its ring goes round it, thin enough to clear the edge. */
    .banner-carousel__dot:focus-visible {
        outline-width: 2px;
        outline-offset: 1px;
    }

    .banner-carousel__dot[aria-current="true"] {
        background: var(--color-white);
    }

    .banner-carousel__live {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
    }

    /* One line fits from 600px: the strip is the banner's own 48px. */
    @media (width >= 600px) {
        .banner-carousel__slide {
            padding-bottom: var(--space-2);
        }
    }

    @media (width >= 768px) {
        .banner-carousel__slide {
            padding: 0.4rem 2.5rem;
            font-size: var(--text-sm);
        }
    }
}