@use "sass:map";
@use "./filter-bar.config" as config;
@use "../../01-core/external" as *;

@mixin ss-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    // The scapepress sites centre `.ss-c-filter-bar` (portfolio filters, see
    // `_filter-bar.sites.scss`); a filter bar reads from the start.
    justify-content: flex-start;
    gap: map.get(config.$ss-filter-bar-config, gap);
    inline-size: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: map.get(config.$ss-filter-bar-config, padding);
    background: map.get(config.$ss-filter-bar-config, bg);
    border: q(1) solid map.get(config.$ss-filter-bar-config, border);
}

/// One filter: small label above its control.
@mixin ss-filter-bar-group {
    display: flex;
    flex-direction: column;
    gap: q(4);
    min-inline-size: 0;

    > label,
    > legend {
        font-size: map.get(config.$ss-filter-bar-config, label-font-size);
        font-weight: map.get(config.$ss-filter-bar-config, label-weight);
    }
}

@mixin ss-filter-bar-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: q(6);
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

@mixin ss-filter-bar-summary {
    color: map.get(config.$ss-filter-bar-config, summary-color);
    font-size: map.get(config.$ss-filter-bar-config, label-font-size);
    font-variant-numeric: tabular-nums;
}