// 引入主题变量
@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-editable-select {
  &-input {
    height: 32px;
    font-size: $devui-font-size;

    &--sm {
      height: $devui-size-sm;
      font-size: $devui-font-size-sm;
    }

    &--lg {
      height: $devui-size-lg;
      font-size: $devui-font-size-lg;
    }

    &--open {
      .#{$devui-prefix}-editable-select__arrow-icon {
        transform: rotate(180deg);
      }
    }

    &__wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 100%;
      padding: 0 8px;
      border: 1px solid $devui-form-control-line;
      border-radius: $devui-border-radius;
      background-color: $devui-form-control-bg;
      transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;

      &:not(.#{$devui-prefix}-editable-select-input__wrapper--disabled):not(&--focus):hover {
        border-color: $devui-form-control-line-hover;
      }

      &--focus {
        border-color: $devui-form-control-line-active;

        &.#{$devui-prefix}-editable-select-input__wrapper--glow-style {
          box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
          border-color: $devui-form-control-line-active;
        }
      }

      &--disabled {
        color: $devui-disabled-text;
        border-color: $devui-disabled-line;
        background-color: $devui-disabled-bg;
        cursor: not-allowed;

        &:hover {
          border-color: $devui-disabled-line;
        }

        .#{$devui-prefix}-editable-select-input__inner {
          color: $devui-disabled-text;
          cursor: not-allowed;
        }
      }

      &--glow-style {
        &:not(.#{$devui-prefix}-editable-select-input__wrapper--disabled, .#{$devui-prefix}-editable-select-input__wrapper--focus):hover {
          box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
          border-color: $devui-form-control-line !important;
        }
      }
    }

    &__inner {
      width: 100%;
      height: 100%;
      padding: 4px 0;
      border: none;
      background: none;
      outline: none;
    }

    &__placeholder {
      width: calc(100% - 16px);
      position: absolute;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transform: translateY(-50%);
      top: 50%;
    }

    &__suffix {
      height: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: $devui-font-size;

      & > span {
        align-items: center;
      }

      .#{$devui-prefix}-editable-select__clear-icon {
        pointer-events: auto;
        display: flex;
        cursor: pointer;

        svg {
          path {
            fill: $devui-shape-icon-fill;
            transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
          }

          &:hover {
            path {
              fill: $devui-shape-icon-fill-hover;
            }
          }
        }
      }

      .#{$devui-prefix}-editable-select__arrow-icon {
        display: flex;
        transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;

        svg path {
          fill: $devui-icon-text;
        }
      }
    }
  }

  &__inner {
    padding: 12px;
    margin: 0;
    list-style: none;
    overflow-y: auto;
  }

  &__item {
    cursor: pointer;
    user-select: none;
    line-height: 20px;
    padding: 8px 12px;
    border: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:not(:first-child) {
      margin-top: 4px;
    }

    &--disabled {
      cursor: not-allowed;
      color: $devui-disabled-text;
    }

    &--selected:not(&--disabled):not(&--no-data-tip) {
      color: $devui-list-item-active-text;
      background-color: $devui-list-item-active-bg;
    }

    &--last-selected {
      background: $devui-list-item-hover-bg;
      color: $devui-list-item-hover-text;
    }

    &--hover:not(&--selected) {
      background-color: $devui-list-item-hover-bg;
      color: $devui-list-item-hover-text;
    }

    &:not(&--disabled):not(&--selected):not(&--no-data-tip):hover {
      background-color: $devui-list-item-hover-bg;
      color: $devui-list-item-hover-text;
    }

    &--no-data-tip {
      text-align: center;
      cursor: not-allowed;
      user-select: none;
      color: $devui-disabled-text;
      font-size: $devui-font-size;
      line-height: 22px;
      padding: 0;
    }
  }
}

.#{$devui-prefix}-editable-select--fade {
  &-bottom {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8) translateY(-4px);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(0.9999) translateY(0);
    }

    &-enter-active {
      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }

  &-top {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8) translateY(4px);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(0.9999) translateY(0);
    }

    &-enter-active {
      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }
}