.filters {
    h1 {
        vertical-align: baseline;
        .icon {
            margin: 0;
        }
        a {
            vertical-align: baseline;
        }
    }
    h2 {
        @extend %large;
        margin-top: 1rem;
        .icon-arrow-right {
            @extend %medium;
            vertical-align: middle;
        }
    }
    input {
        background: $grayer;
        color: $white;
        @include placeholder {
            color: $gray-light;
        }
    }
    .icon-search {
        color: $gray-light;
        position: absolute;
        right: .7rem;
        top: .7rem;
    }
}

.filters-inner {
    opacity: 0;
    transition: all .1s ease-in;
    .loading {
        margin: 0;
        padding: 8px;
        text-align: center;
        width: 100%;
        .loading-spinner {
            @extend %loading-spinner;
            max-height: 1rem;
            max-width: 1rem;
        }
    }
}

.filters-applied {
    margin-top: .5rem;
    .single-filter {
        margin-bottom: .5rem;
    }
}

.filters-step-cat {
    .save-filters {
        color: $white;
        display: block;
        text-align: center;
    }
    .my-filter-name {
        background: $grayer;
        color: $whitish;
        width: 100%;
        @include placeholder {
            color: $gray-light;
        }
    }
}

.filters-cats {
    margin-top: 2rem;
    li {
        border-bottom: 1px solid $gray-light;
        text-transform: uppercase;
    }
    .custom-filters {
        .title {
            color: $green-taiga;
        }
    }
    a {
        color: $grayer;
        display: block;
        padding: .5rem 0 .5rem .5rem;
        transition: color .2s ease-in;
        &:hover {
            color: $green-taiga;
            transition: color .2s ease-in;
            .icon {
                opacity: 1;
                transition: opacity .2s ease-in;
            }
        }
    }
    .icon {
        color: $grayer;
        float: right;
        opacity: 0;
        transition: opacity .2s ease-in;
    }
}
