@import "./lib.less";

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

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

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

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

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

  &-no-data {
    display: flex;
    justify-content: center;
    align-content: center;
    .padding(@dls-option-dropdown-placeholder-padding-y, _);
    color: @dls-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}-dropdown-overflow {
    &::before,
    &::after {
      content: "";
      height: 20px;
      pointer-events: none;
      transition: opacity @veui-transition-duration;
    }
    // &::before {
    //   .absolute(3px, 1px, 0);
    //   .vertical-gradient(#fff, transparent);
    // }

    // &::after {
    //   .absolute(_, 1px, 3px);
    //   .vertical-gradient(#fff, @dls-button-font-color-primary);
    // }

    &-scroll {
      &-start {
        &::before {
          opacity: 0;
        }
      }

      &-end {
        &::after {
          opacity: 0;
        }
      }
    }
  }

  .@{veui-prefix}-checkbox {
    &.@{veui-prefix}-disabled {
      color: inherit;
    }

    &-box {
      margin-right: @dls-option-label-spacing-before;
    }
  }
}

._veui-dropdown-button {
  & &-button {
    width: auto;
    .padding(_, @dls-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: @dls-button-background-color-primary-disabled;
    border-color: @dls-button-border-color-primary-disabled;
    color: @dls-button-font-color-primary-disabled;
  }

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

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

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

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

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

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

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

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

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

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

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

  &-selected {
    color: @dls-option-font-color-selected;
    font-weight: @dls-option-font-weight-selected;

    &:hover {
      color: @dls-option-font-color-selected-hover;
    }

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

    &:active {
      color: @dls-option-font-color-selected-active;
    }
  }

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

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