@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
@import './variables.scss';

.component__filter-box {
    background-color: $colorNavyMedium;
    max-width: 300px;
    min-width: 200px;
}

.filter-box {
    box-sizing: border-box;
    position: relative;
    padding: 30px 0;
    height: 100vh;
}

.filter-box__icon-button {
    color: $colorGreyLight;
    background-color: inherit;
    border: none;
    outline:0;
    margin: 0 0 0 7px;
    padding: 0 0;
    cursor: pointer;
}

.filter-box__top {
    display: flex;
    margin-bottom: 20px;
    padding: 0 20px;
}

// contains two elements, 'clear all filters' and 'show/hide filters'
.filter-box__middle {
    display: flex;
    flex-flow: row wrap;
    
    justify-content: space-between;
    padding: 0 20px;

    &:after {
        width: 100%;
        margin: 20px 0 0 0;
        
        content: ' ';
        border-bottom: 1px solid $colorGreyLight;
    }
}

.filter-box__filters {
    padding: 0 0;
    // overflow-y: scroll;
    overflow-y: hidden;

    // This causes a little overhang in dev, but looks correct in bcdc
    height: calc(100% - 100px);
}

.filter-box__text-button {
        font-family: $font;
        font-size: $fontSizeXS;
        color: $colorGreyLight;

        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
}

.filter-box__filter-scrollbar {
    box-sizing: border-box;
    padding: 0 20px;
}

.filter-box__filter-scroll-thumb {
    background-color: $colorGreyLight;
    border-radius: 3px;
    width: 5px;
}