$width: 200px

    
.root
    width: $width
    position: relative

    &._active
        .options
            display: block
        
        .title_wrapper
            border-color: $primary
            border-radius: $radius $radius 0 0

            & > i
                transform: rotate(90deg)
    
    &:not(._disabled) .title_wrapper
        cursor: pointer

    &:not(._filled) .reset
        display: none

.title_wrapper
    +flex('', center)
    flex-grow: 1
    padding-right: $gutter
    line-height: 38px

    & > i
        font-size: 22px
        transition: transform $transition
    
    & > *
        height: 100%

.title_text
    flex-grow: 1

.reset
    padding-right: $gutter_sm
    transition: color $transition
    
    &:hover
        color: $primary

    & + i
        flex-grow: 0
        display: inline-flex

.options
    display: none
    position: absolute
    width: 100%
    margin-top: -1px
    padding: 0 $gutter $gutter-sm
    border: 1px solid $primary
    border-top-color: transparent
    background: $white
    border-radius: 0 0 $radius $radius
    z-index: 1

.option
    +font(16px, 24px)

    &:not(.option__disabled)
        cursor: pointer

        &:hover
            color: $secondary

._disabled .title_wrapper
    color: $border_color_light
    border-color: $border_color_light

._error
    .options
        border-color: transparent $red_2 $red_2
    
    &._active .title_wrapper
        border-color: $red_2

.option__active
    color: $primary

.option__disabled
    cursor: default
    color: $border_color_light

._active .label_text
    color: $primary