@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/form";

div.one-ui-select {
    $root: &;
    position: relative;
    width: 100%;
    cursor: pointer;

    &__single-value {
        margin-left: 0 !important;
    }

    @include setMargin();

    &__wrapper {
        @include inputWrapper();
        display: flex;
        align-items: center;
    }

    &__select-container{
        width: 100%;
    }

    &__value-container {
        cursor: pointer;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 100%;
        max-height: 100%;
        align-items: center;
    }

    &__control {
        height: 100%;
        box-shadow: none;
        cursor: pointer;
        background-color: transparent !important;
        border: none !important;
        justify-content: center;

        &--is-focused {
            border-radius: 8px;
            border: 1px solid color(dark, 4, 1) !important;
            box-shadow: none !important;
            .one-ui-select__wrapper {
                border: none;
            }
        }
    }
    &__placeholder{
        color: color(grey, 8) !important;
    }

    &__menu {
        z-index: 1001 !important;
        &-list {
            max-height: 200px !important;
            padding: 4px;
        }
    }
    &__option {
        font-size: 14px !important;
        border-radius: 2px;
        line-height: 24px;
        background-color: transparent;
        box-shadow: none !important;
        cursor: pointer !important;
        outline: none !important;

        &:hover {
            background-color: color(grey);
        }

        &--is-selected {
            background-color: transparent !important; // $default-hover !important; ?
            color: color(dark, 2) !important;
            font-weight: 700 !important;
        }

        &--is-disabled {
            cursor: none;
            &:hover {
                background: none;
            }
        }

        &--is-focused {
            background-color: color(grey, 1, 0.5) !important;
            border-radius: 4px;
        }
    }
    &__placeholder,
    &__single-value {
      font-weight: 400;
    }

    &__indicators {
        border: none;
        cursor: pointer;
        width: 24px;
        height: 100%;
        //max-height: 24px;
        //max-width: 24px;
    }

    &__indicator {
        align-items: center;
        padding: 0!important;
        //max-height: 24px;
        //max-width: 24px;
        svg {
            width: 15px;
            height: 15px;
            fill: color(dark);
        }
    }
    &__indicator-separator {
        display: none;
    }

    &__menu {
        height: auto;
        box-shadow: none !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;

        &-list {
            padding: 4px !important;
            background: color(white);
            width: 100%;
            border-radius: 4px;
            box-shadow: rgba(0, 0, 0, 0.12) 0px 30px 60px;
        }
    }
    &--transparent{
        #{$root}__wrapper{
            @include transparentWrapper($root);
        }
    }
    &--size {
        $sizeNames: xsm sm md lg xl;
        $sizes: 24 32 40 48 56;
        $paddings: 0 8px, 0 12px, 0 12px, 0 16px, 0 16px, 0 16px;
        //$clearMargins: 6 8 10 10 6;
        $shifts: 8 12 12 16 16 16;
        @mixin selectSize($root, $size) {
            $i: index($sizeNames, $size);
            $size: #{nth($sizes, $i)}px;
            $sizeName: #{nth($sizeNames, $i)};
            $shift: #{nth($shifts, $i)}px;

            &-#{$sizeName} {
                height: $size;

                #{ $root }__wrapper,
                #{ $root }__control {
                    height: $size;
                    max-height: $size;
                    min-height: $size;

                }

                #{ $root }__value-container {
                    padding-left: $shift;
                    font-size: 14px;
                }

                #{ $root }__select {
                    &__indicator {
                        height: $size;
                        padding: 0 #{$shift / 2};
                    }
                    &__menu-list {
                        padding: #{$shift / 2};
                    }
                }
            }
        }
        @each $size in $sizeNames {
            @include selectSize($root, $size);
        }
    }
}

//&--size {
//    $sizeNames: xsm sm md lg xl;
//    $sizes: 24 32 40 48 56;
//    $paddings: 0 8px, 0 12px, 0 12px, 0 16px, 0 16px, 0 16px;
//    $clearMargins: 6 8 10 10 6;
//
//    @mixin inputSize($root, $size) {
//        $i: index($sizes, $size);
//        &-#{nth($sizeNames, $i)} {
//            height: #{$size}px;
//            min-height: #{$size}px;
//            min-width: #{$size}px;
//            padding: #{nth($paddings, $i)};
//            #{$root}__before,
//            #{$root}__after {
//                min-width: $size;
//                min-height: $size;
//                //margin-right: -#{$paddingH / 2};
//            }
//            #{$root}__clear{
//                width: $size - 8px;
//                height: $size - 8px;
//                max-width: 32px;
//                max-height: 32px;
//                margin-right: -#{nth($clearMargins,$i)}px;
//            }
//        }
//    }
//    @each $size in $sizes {
//        @include inputSize($root, $size);
//    }
//}
//$sizeNames: middle default small;
//$sizes: 48 40 32;