.menu-secondary {
    &.filters-bar {
        @include table-flex-child(0, 1px, 0, 1px);
        @include transition(all .2s linear);
        padding: 0;
        &.active {
            @include table-flex-child(1, 260px, 0, 260px);
            @include transition(all .2s linear);
            padding: 2em 1em;

            .filters-inner {
                @include transition (all .4s ease-in);
                opacity: 1;
            }
        }
    }
}

.filters {
    h1 {
        vertical-align: baseline;
        .subfilter {
            @extend %large;
        }
        .icon {
            margin: 0;
        }
        a {
            vertical-align: baseline;
        }
    }
    form {
        .icon-search {
            position: absolute;
            right: .5rem;
            top: .5rem;
        }
    }
}

.filters-inner {
    opacity: 0;
    @include transition (all .1s ease-in);
}

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

.filter-list {
    margin-top: 2rem;
}

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