@import "../lib.less";
@import (reference) "../dropdown.less";
@import "../variables/components/dropdown.less";
@import "../variables/components/link.less";

.@{veui-prefix}-dropdown {
    &:extend(._veui-dropdown-button all);
    display: inline-flex;

    &-box {
        pointer-events: none;
    }

    &-box &-options {
        pointer-events: all;
    }

    .@{veui-prefix}-button.focus-visible {
        position: relative;
        z-index: 1;
    }

    &-button {
        flex: 1;

        &[ui~="primary"] {
            .@{veui-prefix}-dropdown-icon {
                color: @veui-dropdown-icon-color-aux-primary;
            }

            &:disabled .@{veui-prefix}-dropdown-icon {
                color: @veui-dropdown-icon-color-aux-primary-disabled;
            }

            &::before {
                .absolute(_, _, 50%, -1px);
                transform: translateY(50%);
                width: 1px;
                height: calc(100% + 2px);
                background-color: @veui-dropdown-split-separator-color-primary;
            }

            &.focus-visible::before {
                background-color: transparent;
            }

            &:disabled::before {
                background-color: @veui-dropdown-split-separator-color-primary-disabled;
            }
        }

        &[ui~="text"] {
            padding: 0;
        }

        .@{veui-prefix}-dropdown-icon {
            flex-shrink: 0;
            margin-right: 0;
            color: @veui-dropdown-icon-color-aux-normal;
            .veui-icon-size(@veui-dropdown-icon-size-aux);
        }

        &:disabled .@{veui-prefix}-dropdown-icon {
            color: @veui-dropdown-icon-color-aux-normal-disabled;
        }

        .@{veui-prefix}-dropdown-label {
            margin-right: @veui-dropdown-icon-spacing-aux;
        }
    }

    &-split &-command {
        .border-right-radius(0);
        .padding(_, @veui-dropdown-split-button-padding-x);
        position: relative;
        margin-right: -1px;
        flex-grow: 1;

        &.focus-visible:not([ui~="primary"]) {
            z-index: 1;
        }
    }

    &-split &-button {
        .border-left-radius(0);
        .padding(_, @veui-dropdown-icon-spacing-aux);
        flex-grow: 0;

        &::before,
        &::after {
            content: "";
            display: inline-flex;
        }
    }

    &-options {
        &:extend(._veui-dropdown-overlay all);
        display: flex;
        flex-direction: column;

        & > .@{veui-prefix}-option-group {
            overflow: auto;
        }
    }

    &-search-box.@{veui-prefix}-search-box {
        width: 100%;
    }

    &[ui~="text"] {
        min-width: auto;

        & .@{veui-prefix}-dropdown-label {
            width: auto;
            max-width: none;
        }

        .@{veui-prefix}-button {
            .size(auto);
            color: @veui-link-font-color-normal;

            &:disabled {
                color: @veui-link-font-color-normal-disabled;
            }

            &:not(:disabled) {
                &:hover {
                    color: @veui-link-font-color-normal-hover;
                }

                &.focus-visible {
                    color: @veui-link-font-color-normal-focus;
                }

                &:active {
                    color: @veui-link-font-color-normal-active;
                }
            }
        }
    }
}