/* assets/styles/front/32-saints-filters.css */

.saints-filters {
    position: relative;
    z-index: 20;

    width: min(
        calc(100% - 2.25rem),
        108rem
    );
    margin: 0 auto;
    padding-top: 1.5rem;
}

/*
 * Filter panel
 */

.saints-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
    );
}

/*
 * Fields and labels
 */

.saints-filter-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.saints-filter-field > span {
    color: var(--codex-muted);

    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

/*
 * Inputs
 */

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

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

    margin: 0;
    padding: 0 13px;

    border:
        1px solid
        rgb(167 157 191 / 24%);

    border-radius: 0;

    outline: 0;

    background: rgb(8 5 20 / 88%);
    color: var(--codex-paper);

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

    color-scheme: dark;
}

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

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

.front-saints-page
    .saints-filter-field
    input[type="search"]::-webkit-search-decoration,
.front-saints-page
    .saints-filter-field
    input[type="search"]::-webkit-search-cancel-button,
.front-saints-page
    .saints-filter-field
    input[type="search"]::-webkit-search-results-button,
.front-saints-page
    .saints-filter-field
    input[type="search"]::-webkit-search-results-decoration {
    appearance: none;
    -webkit-appearance: none;
}

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

    outline: 0;

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

.front-saints-page
    .saints-filter-field
    select {
    cursor: pointer;
}

/*
 * Reset action
 */

.front-saints-page
    .saints-filter-reset {
    width: 100%;

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

    padding: 0 1rem;

    border:
        1px solid
        rgb(242 59 210 / 42%);

    border-radius: 0;

    align-self: end;

    cursor: pointer;

    background: rgb(242 59 210 / 8%);
    color: var(--codex-magenta);

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

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.front-saints-page
    .saints-filter-reset:hover {
    border-color: var(--codex-magenta);
    border-radius: 0;

    background: rgb(242 59 210 / 85%);
    color: #fff;
}

.front-saints-page
    .saints-filter-reset:focus-visible {
    border-radius: 0;

    outline:
        2px solid
        var(--codex-cyan);

    outline-offset: 3px;
}

/*
 * Tablet
 */

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

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

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

/*
 * Desktop
 */

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

        padding-top: 0;
    }

    .saints-filter-panel {
        grid-template-columns:
            minmax(180px, 1.4fr)
            repeat(
                4,
                minmax(100px, 1fr)
            )
            minmax(150px, 1fr);

        padding: 16px;

        background: #17102fa8;

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

        backdrop-filter:
            blur(16px);

        box-shadow:
            0 1rem 2.5rem
            rgb(8 5 20 / 24%);
    }

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