@import "../lib.less";
@import (reference) "../dropdown.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;
  }

  &-command + &-button {
    &[ui~="primary"],
    &[ui~="normal"] {
      &::before {
        .absolute(_, _, 50%, -1px);
        transform: translateY(50%);
        width: 1px;
        height: calc(100% + 2px);
      }

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

  &-button {
    flex: 1;

    &[ui~="primary"] {
      &::before {
        background-color: fade(
          @dls-button-font-color-primary,
          percentage(@dls-button-group-separator-opacity)
        );
      }

      &:disabled::before {
        background-color: fade(
          @dls-button-font-color-primary-disabled,
          percentage(@dls-button-group-separator-opacity)
        );
      }

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

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

    &[ui~="normal"] {
      &::before {
        background-color: fade(
          @dls-button-font-color-normal,
          percentage(@dls-button-group-separator-opacity)
        );
      }

      &:disabled::before {
        background-color: fade(
          @dls-button-font-color-normal-disabled,
          percentage(@dls-button-group-separator-opacity)
        );
      }
    }

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

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

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

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

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

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

  &-split &-button[ui] {
    .border-left-radius(0);
    .padding(_, @dls-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: @dls-link-font-color-normal;

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

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

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

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