/* The /category/{slug} product cross-reference: its intro and aside, the subcategory lists and the carousel the script moves between them. */

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

@layer pages {
    .movable-div {
        position: relative;
        width: 100%;
        /* Take full width of .target-div's content area */
        height: 100%;
        /* Take full height of .target-div's content area */
    }

    /* The arrows sit half outside the logo's box, larger and with a wider outline. */
    .movable-div > .carousel-arrow {
        position: absolute;
        top: 50%;
        font-size: var(--text-3xl);
        -webkit-text-stroke-width: 5px;
        /* Half of each arrow is outside the box, in .card--outlined's
           overflow: hidden, which would clip a ring drawn around it. */
        outline-offset: -3px;
    }

    .movable-div > .carousel-arrow.prev {
        left: 0;
        transform: translate(-50%, -50%);
    }

    .movable-div > .carousel-arrow.next {
        right: 0;
        transform: translate(50%, -50%);
    }

    .carousel-track {
        height: 100%;
        width: 100%;
    }

    .carousel-item {
        height: 100%;
        width: 100%;
    }

    /* The cross-reference logo is its own link (it had an empty link laid over it). */
    a.carousel-item {
        display: block;
    }

    .carousel-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* The category page: its intro, its image and the text beside it. */
    .xref-intro {
        max-width: 75%;
        line-height: 1.2;
        padding: var(--space-1);
    }

    .xref-intro__icon {
        display: inline-block;
        margin-bottom: -5px;
    }

    .category-image {
        height: 50vh;
        object-fit: contain;
    }

    .category-aside {
        row-gap: var(--space-4);
        width: min(75%, 500px);
        color: var(--color-forest-green);
    }

    .target-div-container {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: 305px;
    }

    .target-div {
        min-width: 50px;
        min-height: 180px;

        justify-content: space-around;

        margin: var(--space-2) var(--space-4);

        border-radius: var(--radius-lg);

        border: 2px solid var(--color-accent);
        box-sizing: content-box;
    }

    .list-panel {
        margin: var(--space-2) 0;
        flex-grow: 0;
        flex-shrink: 2;
        flex-basis: 250px;
        min-width: 150px;
    }

    .inner-manufacturer-list-card {
        height: fit-content;
    }

    /* A .card .card--outlined. */
    .manufacturer-list-card {
        margin: var(--space-4) 0;
    }

    .selected-item {
        color: var(--color-accent);
    }

    /*
     * The list's entries are <button>s (they were click-only <li>s): no
     * button chrome, the <li>'s text styles, the whole row as before.
     */
    .selection-source__button {
        appearance: none;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        text-align: inherit;
        text-transform: inherit;
    }

    .carousel-item-youtube {
        position: absolute;
        padding: .15rem;
        padding-top: 0;
        right: 0;
        top: 0;
        width: max(20%, 40px);
        z-index: var(--z-raised);
        background-color: var(--color-white);
        border-bottom-left-radius: var(--radius-lg);
    }

    /* The YouTube icon, an <img> (the script used to inline the SVG). */
    .carousel-item-youtube__icon {
        width: 100%;
        height: 100%;
    }
}