@import './globals.scss';

.Filter{
    
    div,
    span,
    .li{
        box-sizing: border-box;
    }

    .dropdown{
        position: relative;
        display: inline-block;
        margin: 10px 5px;
        cursor: pointer;
    }

    .placeholder{
        display: inline-block;
        border-radius: $border-radius;
        padding: 6px 0;
        border: 1px solid $border-color;
    }
    
    .text{
        padding: 5px 10px;
    }

    .text.dimmed{
        color:rgb(222,222,222);
    }

    .icon{
        padding: 5px;
    }

    .icon-right{
        border-left: 1px solid $border-color;
    }

    .icon-left{
        border-right: 1px solid $border-color;
    }

    .wrapper{
        position: absolute;
        top: 100%;
        left: 0;
        background-color: transparent;
        padding-top: 10px;
        border-radius: $border-radius;
        z-index: 1;
    }

    .ul{
        border-radius: $border-radius;
        border: 1px solid $border-color;
        background-color: $white;
        white-space: nowrap;
        overflow: hidden;
    }

    .li{
        padding: 7px 14px;
    }

    .li:hover,
    .li.arrow-selected
    {
        background-color: rgba(222,222,222, .55);
        cursor: pointer;
    }

    .li.selected
    {
        background-color: $dodgerblue;
        color: $white;
        cursor: default;
    }

    .li.empty{
        color:rgb(222,222,222);
    }
}