/* ============================================================================
   06-COMPONENTS -> #FILTERS
   ========================================================================= */

/**
 * 
 */


//
// SCSS imports
//

@use '../02-tools' as *;


/**
 * Filters
 */

.filters {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}


/**
 * Filters item
 */

.filters__item {
    align-items: flex-end;
    display: flex;

    & > * {
        width: 100%;
    }

    @include media-breakpoint-down('lg') {
        & + & {
            margin-top: var(--space-3);
        }
    }
}


/**
 * Filters dropdown
 */

.filters__dropdown {
    @include media-breakpoint-up('lg') {
        display: grid !important;
        gap: var(--space-3);
        grid-template-columns: repeat(4, 1fr);
    }
}


/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Reset filter item
 */

.filters__item[data-filter=reset] {
    justify-content: flex-end;

    @include media-breakpoint-up('lg') {
        & > * {
            width: auto !important;
        }
    }
}


/**
 * Modifier: Toggle filter item
 */

.filters__item[data-filter=toggle] {
    @include media-breakpoint-up('lg') {
        display: none;
    }
}