/* assets/styles/front/24-reworks-filters.css */

.reworks-filters {
    position: relative;
    z-index: 20;
    width: min(
        calc(100% - 2.25rem),
        108rem
    );
    margin: 0 auto;
    padding-top: 1.5rem;
}

/*
 * Filter panel
 *
 * Les valeurs graphiques reprennent directement
 * celles de la maquette de référence.
 */

.filter-panel {
    display: grid;
    gap: 13px;
    padding: 18px;

    border: 1px solid
        rgb(66 245 230 / 16%);

    background: #17102fa8;

    clip-path: polygon(
        12px 0,
        100% 0,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        0 100%,
        0 12px
    );
}

.rework-filter-panel {
    border-color: #ff704838;
}

/*
 * Labels
 */

.filter-panel label {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.filter-panel label > span {
    color: var(--codex-muted);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

/*
 * Inputs
 *
 * Le sélecteur est volontairement plus spécifique
 * que celui de 01-base.css afin de supprimer
 * border-radius, background et dimensions globales.
 */

.front-reworks-page
    .filter-panel
    input[type="search"],
.front-reworks-page
    .filter-panel
    select {
    width: 100%;
    min-width: 0;

    height: 46px;
    min-height: 46px;

    margin: 0;
    padding: 0 13px;

    border: 1px solid #a79dbf3d;
    border-radius: 0;

    outline: 0;

    background: #080514c7;
    color: var(--codex-paper);

    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1;

    color-scheme: dark;
}

.front-reworks-page
    .filter-panel
    input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
}

.front-reworks-page
    .filter-panel
    input[type="search"]::placeholder {
    color: var(--codex-muted);
    opacity: 1;
}

.front-reworks-page
    .filter-panel
    input[type="search"]:focus,
.front-reworks-page
    .filter-panel
    select:focus {
    border-color: var(--codex-cyan);
    border-radius: 0;

    outline: 0;

    box-shadow:
        0 0 0 2px
        rgb(66 245 230 / 8%);
}

.front-reworks-page
    .filter-panel
    select {
    cursor: pointer;
}

/*
 * Reset
 */

.front-reworks-page
    .reset-filters {
    height: 46px;
    min-height: 46px;

    padding: 0 1rem;

    border: 1px solid #f23bd26b;
    border-radius: 0;

    cursor: pointer;

    align-self: end;

    background: #f23bd214;
    color: var(--codex-magenta);

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.front-reworks-page
    .reset-filters:hover {
    border-radius: 0;

    background: #f23bd2d9;
    color: #fff;
}

.front-reworks-page
    .reset-filters:focus-visible {
    outline: 2px solid var(--codex-cyan);
    outline-offset: 3px;
}

/*
 * Tablet
 */

@media (min-width: 45rem) {
    .reworks-filters {
        width: min(
            calc(100% - 8vw),
            108rem
        );
        padding-top: 2rem;
    }

    .filter-panel {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .search-field,
    .reset-filters {
        grid-column: 1 / -1;
    }
}

/*
 * Desktop
 *
 * Dans la maquette, le panneau lui-même est sticky.
 * Dans notre architecture Twig le <section> ne contient
 * que ce panneau : le sticky est donc appliqué au parent
 * afin qu'il reste actif pendant le défilement du listing.
 */

@media (min-width: 61.25rem) {
    .reworks-filters {
        position: sticky;
        z-index: 80;
        top: 90px;

        padding-top: 0;
    }

    .filter-panel {
        grid-template-columns:
            minmax(220px, 1.4fr)
            repeat(
                3,
                minmax(130px, 1fr)
            )
            minmax(160px, 1fr);

        padding: 16px;

        -webkit-backdrop-filter:
            blur(16px);
        backdrop-filter:
            blur(16px);
    }

    .search-field,
    .reset-filters {
        grid-column: auto;
    }
}