@dropdown-prefix-cls: ~"@{css-prefix}dropdown";
@dropdown-item-prefix-cls: ~"@{dropdown-prefix-cls}-item";

.@{dropdown-prefix-cls} {
    height: 36px ;
    min-width: 70px;
    display: inline-block;
    //position: relative;
    .@{dropdown-item-prefix-cls} {
        color: @color-text-level3;
        padding: 10px 12px;
        &:hover {
            background: @dropdown-item-hover-bg-color;
        }
        &:active {
            background: @dropdown-item-hover-bg-color;
            color: @color-brand-primary;
        }
        &-disabled,
        &-disabled:hover {
            color: @color-icon-disable;
            background: @color-functional-white;
        }
        &-selected {
            background-color: @color-functional-white;
            // color: @color-brand-primary;
        }
        
        &-divided{
            margin-top: 0;
            border: none;
            &:before{
                height: 1px;
                margin: auto;
                background-color: @dropdown-item-split-color;
                top: -10px;
            }
        }
    }
    .@{select-dropdown-prefix-cls} {
        overflow: visible;
        max-height: none;
    }
    .@{dropdown-prefix-cls} {
        width: 100%;
    }

    &-rel{
        position: relative;
        &-user-select-none{
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        &-normal {
            padding: 12px 9px;
            height: 36px;
            line-height: 1;
            box-sizing: border-box;
            text-align: center;
            border-radius: 4px;
            white-space: nowrap;
            transition: background-color 0.3s;
            &:hover {
                background-color: @dropdown-hover-bg-color;
            }
        }
    }

    .haloe-icon-chevron-down{  
        width: 16px; 
        height: 16px; 
        transition: all 0.3s ease; 
        transform-origin: center; 
      }

    &-rel:hover{
        .haloe-icon-chevron-down {
            height: 10px;
            transform: rotate(180deg);
        }
    }
    &-menu{
        min-width: 100px;
        margin-bottom: 4px;
    }

    &-transfer{
        width: auto;
    }
    &-item-selected, &-item&-item-selected:hover{
        background:  ~`colorPalette("@{primary-color}", 1)`;
    }
}

.@{icon-prefix-cls}-filter{
    vertical-align: 0;
}

.select-item(@dropdown-prefix-cls, @dropdown-item-prefix-cls);