.library {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    width: 100%;
}

.subContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;

    .checkContainer {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .25rem;
    }
}

.checkContainer input[type=checkbox]{
    accent-color: var(--primary);
    transform: scale(1.25);
}


/* category filter -> sticky pill bar */
.groupButtons {
    display: flex;
    justify-content: flex-start;
    gap: .25rem;
    width: 100%;
    padding: .25rem;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 0;
    z-index: 1;
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    .categoryButton {
        flex-shrink: 0;
        height: 2rem;
        padding: 0 .75rem;
        background-color: transparent;
        border: 0;
        border-radius: .5rem;
        font: inherit;
        font-size: .75rem;
        font-weight: 600;
        white-space: nowrap;
        color: var(--text-muted);
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;

        &:hover {
            background-color: var(--surface-hover);
            color: var(--text);
        }

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

        &.active {
            background-color: var(--primary-soft);
            color: var(--primary);
        }
    }
}

/* items -> poster grid */
.itemsContainer {
    width: 100%;

    .media-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        align-content: start;
        gap: calc(var(--spacing) * .75);
    }

    /* fade + slide on render */
    .media-list,
    .empty-message {
        opacity: 0;
        transform: translateY(.5rem);
        transition: opacity .25s ease, transform .25s ease;

        &.visible {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .media-card {
        flex-direction: column;
        gap: .5rem;
        padding: .5rem;

        .cover-placeholder {
            width: 100%;
            border-radius: calc(var(--radius) - .125rem);
        }

        .card-controls {
            width: 100%;
            margin-top: auto;
            padding-top: .5rem;
            border-top: 1px solid var(--border);
        }
    }
}

/* desktop  */
@media (min-width: 60rem) {
    .library {
        display: grid;
        grid-template-columns: 11rem minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "filters heading"
            "filters items";
        gap: var(--spacing) calc(var(--spacing) * 1.5);
        align-content: start;
    }

    /* category filter -> left column */
    .groupButtons {
        grid-area: filters;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: auto;
        height: auto;
        padding: 0;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        position: static;
        overflow: visible;

        .categoryButton {
            width: 100%;
            height: auto;
            padding: .5rem .75rem;
            text-align: start;
            font-size: .85rem;
        }
    }

    .subContainer {
        grid-area: heading;
    }

    /* items -> poster grid */
    .itemsContainer {
        grid-area: items;
        min-height: 0;

        .media-list {
            grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .itemsContainer .media-list,
    .itemsContainer .empty-message {
        transition: none;
    }
}