@import './variables.scss';

.dim-selector {
    box-sizing: border-box;
    background-color: $colorLight;
    color: $colorNavyMedium;
    font-family: $font;
    font-size: $fontSizeS;
    cursor: pointer;
    
    height: 30px;
    overflow: visible;
    position: relative;
}

.dim-selector__selection {
    padding: 8px 16px;
    
}

.dim-selector__options,
.dim-selector__options--open,
.dim-selector__options--closed {
    box-sizing: border-box;
    background-color: $colorLight;
    color: $colorNavyMedium;
    border-top: 2px solid $colorBrandLight;
    box-shadow: $boxShadowDefault;
    
    position: absolute;
    top: 30px;
    left: 0;

    margin: 0;
    padding: 0;
    width: 100%;
    
}

.dim-selector__options--open {
    list-style: none;
    z-index: 800;
}

.dim-selector__options--closed {
    max-height: 0;
    overflow: hidden;
}

.dim-selector__option,
.dim-selector__option--selected {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 16px;

    &:hover {
        background-color: $colorGreyExtraLight;
    }
}

.dim-selector__option--selected {
    background-color: $colorGreyExtraLight;
}