// 4-space tabs; comments in English (clean-code)

// =========================
// Design tokens
// =========================
$pill-bg-unselected: #ddf9ac;
$pill-bg-selected:   #05142d;
$text-unselected:    #505b6c;
$text-selected:      #fff;
$focus-color:        #2563eb;
$transition-fast:    0.2s;

// =========================
// Filter pills layout
// =========================
.collection-list-2 {
    // Flex wrap grid for pills
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 24px;
    row-gap: 16px;
}

// =========================
// Base pill styles (shared)
// =========================
%pill-base {
    // Make label itself the clickable pill
    position: relative;                  // needed for .cat-input absolute overlay
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    padding: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color $transition-fast ease, color $transition-fast ease;
}

.cat-btn {
    @extend %pill-base;
    background-color: $pill-bg-unselected;

    // ========== Selected state driven by :has() (no JS) ==========
    // When the radio inside is checked, flip to the dark style
    &:has(.cat-input:checked) {
        background-color: $pill-bg-selected;

        // Switch text color to white when selected
        .text-204 {
            color: $text-selected;
        }
    }

    // Ensure unselected state keeps original text color
    &:not(:has(.cat-input:checked)) {
        .text-204 {
            color: $text-unselected;
        }
    }
}

// Selected (dark) – legacy class support if still used somewhere
.cat-btn-selected {
    @extend %pill-base;
    background-color: $pill-bg-selected;

    // Optional: legacy .cat-btn-selected should also render white text
    .text-205 {
        color: $text-selected;
    }
}

// =========================
// Typography – keep your classes
// =========================
.text-204 {
    font-family: var(--ff-baseline);
    color: $text-unselected;             // unselected text color
    text-transform: uppercase;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.text-205 {
    font-family: var(--ff-baseline);
    color: $text-selected;               // selected text color
    text-transform: uppercase;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

// =========================
// Hide the native radio, keep it clickable & focusable
// =========================
.cat-input {
    // Make the whole pill the click target and hide the dot
    position: absolute;                  // stretch on the label
    inset: 0;
    opacity: 0;                          // visually hidden
    cursor: pointer;

    // Keyboard focus ring (accessibility)
    &:focus-visible {
        outline: 2px solid $focus-color;
        outline-offset: 3px;
    }
}



// under 450px
@media (max-width: 450px) {
    .w-dyn-item {
        width: 100%;
    }
    .cat-btn, .cat-btn-selected {
        width: 100%;
    }
}