///*------------------------------------*\
//    #SEARCH-FILTER
//\*------------------------------------*/

// Search filter
.search-filter {
    position: relative;
    overflow: hidden;
}

.search-filter--opened-mode {
    width: 100%;
}

.search-filter--closed-mode {
    width: $size-l;
}

.search-filter--autocomplete {
    padding: $base-spacing-unit / 2;
}

    // Search filter: container
    .search-filter__container {
        position: relative;
        height: $size-l;
        padding: 0 $size-l 0 $size-xl;
        overflow: hidden;

        .search-filter--closed-mode & {
            width: 240px;
        }
    }

    // Search filter: button
    .search-filter__button {
        @include position(absolute, 0 null null 0);
        @include size($size-l);
    }

    // Search filter: input
    .search-filter__input input {
        @include text-field-reset();
        @include size(100% $size-l);
        @include font-size(16px);
        line-height: $size-l;

        .search-filter--theme-light & {
            color: $black-1;

            @include placeholder {
                color: $black-3;
            }
        }

        .search-filter--theme-dark & {
            color: $white-1;

            @include placeholder {
                color: $white-3;
            }
        }
    }

    // Search filter: clear
    .search-filter__clear {
        @include position(absolute, 0 0 null null);
        @include transform(translateX($size-l));
        @include transition-property(transform);
        @include transition-duration(0.4s);
        @include transition-timing-function($ease-out-quint);

        .search-filter--has-clear-button & {
            @include transform(translateX(0));
        }
    }

    // Search filter: loader
    .search-filter__loader {
        @include position(absolute, null 0 0 0);
    }

    // Search filter: autocomplete item
    .search-filter__autocomplete-item {
        position: relative;
        display: block;
        height: 48px;
        padding: 0 $base-spacing-unit * 4 0 $size-xl + ($base-spacing-unit / 2);
        cursor: pointer;
        color: $black-1;
        line-height: 48px;
        text-decoration: none;
        white-space: nowrap;

        .#{$mdi-css-prefix} {
            @include position(absolute, $base-spacing-unit / 2 null null $base-spacing-unit / 2);
            @include size($size-l);
            @include font-size(24px);
            color: $black-3;
            line-height: $size-l;
            text-align: center;
        }

        &:hover,
        &.search-filter__autocomplete-item--is-active {
            background-color: $grey-200;
        }
    }