/**
* Derrière le Miroir — shared components
* Load on every page that uses them, BEFORE the page's own stylesheet.
* Relies on the site's --db-* variables.
* Shape rule: rounded = action, square = information.
*/

/* ------------------------------------------------------------------ */
/* Chips — selectable pills                                            */
/* ------------------------------------------------------------------ */
/*
* Markup:
* <div class="db-chips">
*   <button type="button" class="db-chip" aria-pressed="false">Label <span class="db-chip__count">3</span></button>
* </div>
* Selected state = aria-pressed="true" (set by the page's script).
* Optional count: .db-chip__count. Optional muted state: .is-empty.
* Add .db-chips--scroll to keep the row on one swipeable line on smartphones.
*/

.db-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.db-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--db-pink-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--db-charcoal);
    font-family: "Libre Franklin", system-ui, sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.db-chip:hover {
    border-color: var(--db-pink-link);
}

.db-chip:focus-visible {
    outline: 2px solid var(--db-pink-link);
    outline-offset: 2px;
}

.db-chip[aria-pressed="true"] {
    padding: 0 15px;
    border: 2px solid var(--db-pink-link);
    background: #F7E9E4;
    color: var(--db-pink-link);
}

.db-chip[aria-pressed="true"]::before {
    content: "✓";
}

.db-chip__count {
    font-size: 13px;
    font-weight: 400;
    color: var(--db-light-grey);
}

.db-chip[aria-pressed="true"] .db-chip__count {
    color: var(--db-pink-link);
}

.db-chip.is-empty {
    color: var(--db-light-grey);
}

@media (max-width: 600px) {
    .db-chips--scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px;
        padding: 2px 32px 6px 16px;
        scroll-padding-inline: 16px 32px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 32px), transparent 100%);
    }
    
    .db-chips--scroll::-webkit-scrollbar {
        display: none;
    }
    
    .db-chips--scroll .db-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}