@import '../mixins/input.less';
@import '../mixins/common.less';
@import '../custom.less';
@import '../transition/search-line.less';
@import '../transition/icon.less';

@search-prefix-cls: ~'@{css-prefix}search';

.@{search-prefix-cls} {
  @apply relative;
  @apply inline-block;
  @apply text-xs;
  @apply w-full;

  & &__line {
    @apply inline-table;
    @apply w-full;
    @apply h-7;
    @apply border border-solid border-color-border;
    @apply rounded;
    @apply bg-color-bg-1;
    @apply duration-300;
    @apply border-separate;

    &:hover {
      @apply border-color-border-hover;
    }

    &.focus,
    &:focus {
      @apply border-color-border-focus;
    }
  }

  & &__prefix, // tiny左侧插槽适配saas官网样式
  & &__present,
  & &__input,
  & &__input-btn {
    @apply table-cell;
    @apply relative;
    @apply align-middle;
    @apply right-0;
  }

  & &__input {
    @apply w-full;
    @apply ~'h-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]';
    @apply ~'leading-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]';
    @apply text-color-text-primary;
    @apply pl-3;
    @apply pr-2;
    @apply border-0;
    @apply outline-0;
    @apply bg-transparent;
    @apply text-xs;
    .placeholder(@color: theme('colors.color.text.placeholder'));

    &:focus {
      @apply caret-color-brand;
    }
  }

  & &__prefix, // tiny左侧插槽适配saas官网样式
  & &__input-btn {
    @apply w-8;
    @apply ~'h-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]';
    @apply py-0 px-2;
    @apply text-center;

    a {
      @apply no-underline;
      @apply block;
      @apply ~'leading-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]';
    }

    svg {
      @apply fill-color-text-placeholder;
      @apply text-base;
      @apply align-text-bottom;
    }

    &:hover svg {
      @apply fill-color-brand-hover;
    }
  }

  // tiny左侧插槽适配saas官网样式
  & &__prefix {
    @apply w-4;
    @apply pr-0;
  }

  & &__present {
    @apply text-color-text-primary;
    @apply ~'leading-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]';
    @apply table-cell;
    @apply pl-2;
    @apply w-px;
    @apply whitespace-nowrap;
    @apply border-r border-r-color-border;

    .icon-outer {
      @apply ~'h-4.5';
      @apply inline-block;
      @apply py-0 pr-2 pl-1;
      @apply cursor-pointer;

      svg {
        @apply text-sm;
        @apply fill-color-icon-primary;
        @apply ~'mb-0.5';
      }
    }
  }

  & &__selector {
    @apply absolute;
    @apply top-7;
    @apply left-0;
    @apply overflow-hidden;
    @apply ~'min-w-[theme(spacing.18)]';
    @apply border border-solid border-color-border;
    @apply rounded-sm;
    @apply text-xs;
    @apply shadow-md;
    @apply bg-color-bg-1;
    @apply text-color-text-primary;
    @apply ~'mt-0.5';
  }

  & &__selector-body {
    @apply ~'max-h-[theme(spacing.72)]';
    @apply overflow-y-auto;
    @apply overflow-x-hidden;
  }

  & &__poplist-item {
    @apply ~'min-h-[theme(spacing.8)]';
    @apply py-0 px-2;
    @apply leading-7;
    @apply ~'max-w-[100%]';
    @apply text-xs;
    @apply overflow-hidden;
    @apply text-left;
    @apply text-ellipsis;
    @apply whitespace-nowrap;

    &:hover {
      @apply bg-color-bg-2;
      @apply cursor-pointer;
    }

    span {
      @apply text-xs;
    }

    .icon-check {
      @apply text-base;

      &:hover {
        @apply text-color-brand-hover;
      }
    }
  }

  &.mini &__line {
    @apply rounded-full;
    @apply w-full;
    float: right;
  }

  &.mini.collapse {
    @apply visible;
  }

  &.mini.collapse &__input-btn {
    svg {
      @apply fill-color-icon-secondary;
    }
  }

  &.mini &__input {
    @apply rounded-full;
  }

  &.collapse &__input {
    @apply p-0;
    @apply w-8;
    float: right;
  }

  &.mini.collapse &__line {
    @apply w-8;
    @apply bg-transparent;
    @apply border-separate;
  }

  &.mini.collapse &__present,
  &.mini.collapse &__input {
    @apply hidden;
  }

  .fade-enter-to {
    @apply opacity-0;
  }

  .fade-enter,
  .fade-leave-to {
    @apply opacity-0;
  }
  &.@{search-prefix-cls}--medium {
    .@{search-prefix-cls}__line {
      @apply h-8;
      .@{search-prefix-cls}__present {
        @apply ~'leading-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))]';
      }
      .@{search-prefix-cls}__input-btn {
        @apply ~'h-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))]';
        a {
          @apply ~'leading-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))]';
        }
      }
    }
    .@{search-prefix-cls}__input {
      @apply ~'h-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))]';
      @apply ~'leading-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))]';
      @apply text-sm;
      &::placeholder {
        @apply text-sm;
      }
    }
  }

  &.@{search-prefix-cls}--mini {
    .@{search-prefix-cls}__line {
      @apply h-6;
      .@{search-prefix-cls}__present {
        @apply ~'leading-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))]';
      }
      .@{search-prefix-cls}__input-btn {
        @apply ~'h-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))]';
        a {
          @apply ~'leading-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))]';
        }
      }
    }
    .@{search-prefix-cls}__input {
      @apply ~'h-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))]';
      @apply ~'leading-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))]';
      @apply text-xs;
      &::placeholder {
        @apply text-xs;
      }
    }
  }
}
