@import "./lib.less";
@import "./variables/components/option.less";
@import "./variables/components/button.less";

._veui-dropdown-overlay {
    .margin(@veui-option-dropdown-target-spacing, _);
    outline: none;
    overflow-y: auto;
    .veui-transition(transform);
    transform-origin: 50% 0;
    box-shadow: @veui-option-dropdown-shadow;
    background-color: @veui-option-background-color;

    &[ui~="xs"] {
        max-height: @veui-option-dropdown-max-height-xs;
        border-radius: @veui-option-dropdown-border-radius-xs;
    }

    &[ui~="s"] {
        max-height: @veui-option-dropdown-max-height-s;
        border-radius: @veui-option-dropdown-border-radius-s;
    }

    &[ui~="m"] {
        max-height: @veui-option-dropdown-max-height-m;
        border-radius: @veui-option-dropdown-border-radius-m;
    }

    &[ui~="l"] {
        max-height: @veui-option-dropdown-max-height-l;
        border-radius: @veui-option-dropdown-border-radius-l;
    }

    &-no-data {
        display: flex;
        justify-content: center;
        align-content: center;
        .padding(@veui-option-dropdown-placeholder-padding-y-top, _, @veui-option-dropdown-placeholder-padding-y-bottom, _);
        color: @veui-option-dropdown-placeholder-font-color;
    }

    .@{veui-prefix}-overlay-enter &,
    .@{veui-prefix}-overlay-leave-to & {
        transform: scaleY(0);
    }

    [x-placement*="top"].@{veui-prefix}-overlay-enter-active &,
    [x-placement*="top"].@{veui-prefix}-overlay-leave-active & {
        transform-origin: 50% 100%;
    }

    .@{veui-prefix}-checkbox {
        &.@{veui-prefix}-disabled {
            color: inherit;
        }
        &-box {
            margin-right: @veui-option-label-spacing-before;
        }
    }
}

._veui-dropdown-button {
    & &-button {
        width: auto;
        .padding(_, @veui-button-padding-m);
    }

    &-label {
        width: 100%;
        .ellipsis();
    }

    &-icon {
        .veui-transition(transform);
    }

    &-expanded &-icon {
        transform: rotateZ(180deg);
    }

    &-button[ui~="primary"]:not(.@{veui-prefix}-button-loading):disabled {
        background-color: @veui-button-background-color-primary-disabled;
        border-color: @veui-button-border-color-primary-disabled;
        color: @veui-button-font-color-primary-disabled;
    }

    &-expanded &-button.@{veui-prefix}-button[ui~="primary"] {
        &,
        &:hover,
        &[data-focus-visible-added] {
            color: @veui-button-font-color-primary;
            background-color: @veui-button-background-color-primary-hover;
        }

        &:active {
            background-color: @veui-button-background-color-primary-active;
        }
    }

    &-expanded &-button {
        &:not([ui~="text"]) {
            &,
            &:hover,
            &[data-focus-visible-added] {
                color: @veui-button-font-color-normal;
                background-color: @veui-button-background-color-normal-hover;
            }

            &:active {
                background-color: @veui-button-background-color-normal-active;
            }
        }
    }
}

._veui-dropdown-option {
    .veui-button-transition();
    .ellipsis();
    display: flex;
    align-items: center;
    width: 100%;
    height: @veui-option-height-m;
    max-width: @veui-option-max-width-m;
    background-color: @veui-option-background-color;
    border: none;
    .padding(0, @veui-option-padding-m);
    color: @veui-option-font-color;
    text-align: left;
    outline: none;
    cursor: pointer;
    font-size: @veui-option-font-size-m;

    &[ui~="xs"] {
        font-size: @veui-option-font-size-xs;
        height: @veui-option-height-xs;
        max-width: @veui-option-max-width-xs;
        .padding(_, @veui-option-padding-xs);
    }

    &[ui~="s"] {
        font-size: @veui-option-font-size-s;
        height: @veui-option-height-s;
        max-width: @veui-option-max-width-s;
        .padding(_, @veui-option-padding-s);
    }

    &[ui~="l"] {
        font-size: @veui-option-font-size-l;
        height: @veui-option-height-l;
        max-width: @veui-option-max-width-l;
        .padding(_, @veui-option-padding-l);
    }

    &:hover {
        color: @veui-option-font-color-hover;
        background-color: @veui-option-background-color-hover;
    }

    &[data-focus-visible-added] {
        color: @veui-option-font-color-focus;
        background-color: @veui-option-background-color-focus;
    }

    &:active {
        color: @veui-option-font-color-active;
        background-color: @veui-option-background-color-active;
    }

    &-selected {
        &,
        &:hover,
        &[data-focus-visible-added],
        &:active {
        color: @veui-option-font-color-selected;
        font-weight: @veui-option-font-weight-selected;
        }
    }

    &-matched {
        color: @veui-option-font-color-highlighted;
        background: transparent;
    }

    &-disabled,
    &-group-label-disabled {
        cursor: not-allowed !important;
        color: @veui-option-font-color-disabled !important;
        background-color: @veui-option-background-color !important;
    }
}