@import '../../style/mixins/size';
@import '../../style/mixins/flex';
@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-search {
  position: relative;
  border-radius: $devui-border-radius;
  transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
  @include flex;

  &:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):not(.#{$devui-prefix}-search--glow-style):hover {
    .#{$devui-prefix}-input {
      border-color: $devui-form-control-line-hover;
    }
  }

  .#{$devui-prefix}-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: $devui-size-md;
    // 60px = clear + icon 的宽度
    padding: 4px 60px 4px 8px;
    font-size: $devui-font-size-md;
    color: $devui-text;
    box-sizing: border-box;
    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;

    &__inner {
      padding: 0;
    }

    &__wrapper {
      border: none;
      padding: 0;
    }
  }

  &--focus {
    .#{$devui-prefix}-input {
      border-color: $devui-form-control-line-active;
    }
  }

  &__clear,
  &__icon {
    @include size($devui-size-md, $devui-size-md);
    @include flex;

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

  &__clear {
    position: absolute;
    right: 36px;
    cursor: pointer;
    height: 100%;
    font-size: 10px;
    @include size(30px, 100%);
    @include flex;

    & > 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;
        }
      }
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 46%;
      border-left: 1px solid $devui-dividing-line;
    }
  }

  &__icon {
    pointer-events: all;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
  }

  &--glow-style {
    &:not(.#{$devui-prefix}-search--disabled) {
      &:hover,
      &.#{$devui-prefix}-search--focus {
        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
      }
    }
  }

  &--sm {
    .#{$devui-prefix}-input {
      height: $devui-size-sm;
      font-size: $devui-font-size-sm;

      &.#{$devui-prefix}-input--sm {
        font-size: $devui-font-size;
        padding-right: 60px;
      }
    }

    .#{$devui-prefix}-search__icon {
      @include size(34px, 26px);

      svg {
        width: 14px;
        height: 14px;
      }
    }

    .#{$devui-prefix}-search__clear {
      @include size(26px, 100%);

      right: 34px;

      & > svg {
        width: 14px;
        height: 14px;
      }
    }

    .#{$devui-prefix}-search__clear {
      right: $devui-size-sm;
    }
  }

  &--lg {
    .#{$devui-prefix}-input {
      height: $devui-size-lg;
      font-size: $devui-font-size-lg;

      &.#{$devui-prefix}-input--lg {
        padding: 4px 80px 4px 10px;
      }
    }

    .#{$devui-prefix}-search__icon,
    .#{$devui-prefix}-search__clear {
      @include size($devui-size-lg, $devui-size-lg);

      svg {
        width: 18px;
        height: 18px;
      }
    }

    .#{$devui-prefix}-search__clear {
      right: $devui-size-lg;
    }
  }

  &--disabled {
    .#{$devui-prefix}-input {
      cursor: not-allowed;
      color: $devui-disabled-text;
      border-color: $devui-disabled-line;
      background-color: $devui-disabled-bg;
    }

    .#{$devui-prefix}-search__icon {
      cursor: not-allowed;
    }

    .icon-search {
      color: $devui-disabled-text !important;
    }
  }

  &--left {
    .#{$devui-prefix}-input {
      padding-right: $devui-size-md;
      padding-left: $devui-size-md;

      &.#{$devui-prefix}-input--lg {
        padding-right: $devui-size-lg;
        padding-left: $devui-size-lg;
      }

      &.#{$devui-prefix}-input--sm {
        padding-right: $devui-size-sm;
        padding-left: $devui-size-sm;
      }
    }

    .#{$devui-prefix}-search__clear {
      right: 0;

      &::after {
        display: none;
      }
    }

    .#{$devui-prefix}-search__icon {
      left: 0;
    }
  }

  &--no-border {
    .#{$devui-prefix}-input,
    .#{$devui-prefix}-input__wrapper {
      background-color: unset;
    }

    &:not(.#{$devui-prefix}-search--focus) .#{$devui-prefix}-input:not(:hover, :focus, :active) {
      border: 1px solid transparent;
    }
  }
}