@import '../custom.less';

@select-prefix-cls: ~'@{css-prefix}select';
@input-prefix-cls: ~'@{css-prefix}input';
@tag-prefix-cls: ~'@{css-prefix}tag';

.@{select-prefix-cls} {
  @apply inline-block;
  @apply relative;
  @apply w-full;
  @apply outline-0;

  & &__tags > span:not(.is-disabled),
  & &__tags > span:not(.is-disabled) > span {
    @apply contents;
  }

  &__show-tips {
    @apply ~"max-h-[theme(spacing.72)]";
    @apply overflow-x-hidden;
    @apply w-full;
  }

  &__show-common {
    @apply inline-block;
  }

  &__input {
    @apply border-none;
    @apply outline-0;
    @apply p-0;
    @apply ml-px; // 注意考虑tiny-select__tags已有的间距
    @apply text-color-text-primary;
    @apply text-xs;
    @apply h-7;
    @apply appearance-none;
    @apply bg-transparent;

    &:focus-visible {
      outline: none;
    }

    &.is-mini {
      @apply h-6;
    }

    &.is-small {
      @apply h-9;
    }

    &.is-medium {
      @apply h-8;
    }
  }

  &&__multiple {
    .@{input-prefix-cls}__suffix {
      @apply ~'top-1.5';
      @apply transform-none;
    }

    .@{input-prefix-cls} {
      &.is-show-close {
        .@{select-prefix-cls}__close {
          @apply mr-1;
        }
      }
    }
  }

  &&__multiple.@{select-prefix-cls}--medium {
    .@{input-prefix-cls}__suffix {
      @apply top-2;
    }
  }

  &&__multiple.@{select-prefix-cls}--mini {
    .@{input-prefix-cls}__suffix {
      @apply top-1;
    }
  }

  &&__multiple:not(&__collapse-tags):not(&__filterable) &__tags > span {
    // 兼容ie10-ie11
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      @apply flex;
      @apply flex-wrap;
      @apply justify-start;
      @apply content-start;
    }

    // 兼容edge
    @supports (-ms-ime-align: auto) {
      @apply w-full;
      @apply flex;
      @apply flex-wrap;
      @apply justify-start;
      @apply content-start;
    }
  }

  &&__collapse-tags &__tags {
    & > span {
      @apply flex;
      @apply w-full;
    }
  }

  &&__collapse-tags&__filterable &__tags {
    & > span {
      @apply w-auto;
      max-width: 76%;

      & > span:first-child {
        @apply flex-1;

        // 兼容ie10-ie11
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          @apply basis-auto;
        }
      }

      & > span:only-child,
      & > span:not(:only-child):first-child {
        @apply ~"max-w-[100%]";
      }

      & > span:not(:only-child):not(:first-child) {
        // 兼容ie10-ie11
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          @apply shrink-0;
          @apply basis-auto;
        }
      }
    }
  }

  &&__collapse-tags &__tags &__tags-number {
    @apply overflow-visible;
  }

  & &__placeholder {
    @apply h-7;
    @apply invisible;
  }

  &--mini &__placeholder {
    @apply h-6;
  }

  &--small &__placeholder {
    @apply h-7;
  }

  &--medium &__placeholder {
    @apply h-8;
  }

  &__tags {
    @apply absolute;
    @apply leading-normal;
    @apply whitespace-normal;
    @apply pl-3;
    @apply pr-2;
    @apply ~'z-[1]';
    @apply ~"top-1/2";
    @apply ~"-translate-y-2/4";
    @apply flex;
    @apply items-center;
    @apply flex-wrap;
    @apply overflow-hidden;

    &.is-showicon {
      @apply pl-9;
    }

    .@{tag-prefix-cls}.@{tag-prefix-cls}--info {
      @apply whitespace-nowrap;
      @apply text-ellipsis;
      @apply overflow-hidden;
      @apply inline-flex;
      @apply justify-start;
      @apply items-center;

      .@{tag-prefix-cls}__close {
        @apply fill-color-text-secondary;
      }
    }

    .@{select-prefix-cls}__tags-panel {
      @apply flex;
      width: ~'calc(100% + theme(spacing.2))';

      .@{tag-prefix-cls}:last-child {
        @apply flex-shrink-0;
      }
    }

    .@{select-prefix-cls}__tags-content {
      @apply contents;
    }
  }

  &.is-hover-expand {
    @apply align-top;

    .@{select-prefix-cls}__tags-group {
      @apply absolute;
      @apply top-0;
      @apply left-0;
      @apply right-0;
    }

    &.is-hover {
      .is-expand {
        @apply ~"z-[2]";
      }
    }

    .@{select-prefix-cls}__tags {
      @apply h-6;
      @apply overflow-hidden;

      &-collapse {
        @apply visible;
        @apply static;

        &.is-hidden {
          @apply invisible;
          @apply absolute;
        }
      }

      > span > span {
        @apply w-full;
      }
    }

    &.is-hover .@{select-prefix-cls}__tags {
      @apply h-auto;
      @apply ~"max-h-[theme(spacing.28)]";
      @apply overflow-y-auto;

      &-collapse {
        @apply invisible;
        @apply absolute;
      }

      &.is-hidden {
        @apply m-0;
      }

      &.not-selected {
        @apply overflow-y-hidden;
      }
    }

    & .is-expand {
      @apply absolute;
      @apply w-full;
    }

    &.@{select-prefix-cls}--mini {
      .@{select-prefix-cls}__tags {
        @apply ~"pt-0.5";
      }
    }
  }

  &.is-hover-expand.is-disabled {
    .@{select-prefix-cls}__tags {
      @apply h-auto;
    }
  }

  &.is-disabled {
    .@{input-prefix-cls} {
      &__inner {
        @apply pr-3;
      }

      &__suffix {
        @apply hidden;
      }
    }

    .@{select-prefix-cls}__tags {
      @apply pr-4;
    }
  }

  &__tags-text {
    @apply inline-block;
    @apply w-full;
    @apply whitespace-nowrap;
    @apply text-ellipsis;
    @apply overflow-hidden;
    @apply align-bottom;

    & + .@{tag-prefix-cls}__close {
      @apply shrink-0;
    }

    &.is-disabled {
      @apply flex;

      > span {
        @apply inline-block;
        @apply w-full;
        @apply whitespace-nowrap;
        @apply text-ellipsis;
        @apply overflow-hidden;
        @apply text-color-text-disabled;
      }
    }
  }

  &-tip &-tipcontent {
    max-width: 300px;
  }

  & .@{input-prefix-cls} {
    .@{input-prefix-cls}__inner {
      @apply pl-3;
      @apply pr-9;
    }

    .@{input-prefix-cls}__suffix {
      @apply right-3;
    }

    &.@{input-prefix-cls}-prefix {
      .@{input-prefix-cls}__inner {
        @apply pl-9;
      }
    }

    &.is-show-close {
      .@{input-prefix-cls}__inner {
        @apply pr-12;
      }

      .tiny-select__close {
        @apply mr-2;
        @apply fill-color-text-secondary;

        &:hover {
          @apply fill-color-icon-primary;
        }
      }
    }
  }

  & .@{input-prefix-cls} &__caret {
    @apply text-base;
    @apply transition-transform duration-300;
    transform: rotateZ(180deg);
    @apply cursor-pointer;
    @apply fill-color-brand-hover;

    &.is-reverse {
      transform: rotateZ(0);
      @apply fill-color-text-placeholder;
    }

    &.not-reverse {
      transform: rotateZ(0);

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

    &.is-show-close {
      @apply text-xs;
      @apply text-center;
      transform: rotateZ(180deg);
      @apply rounded-full;
      @apply fill-color-icon-secondary;
      transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

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

    svg {
      @apply w-3;
      @apply h-3;
    }
  }

  & .@{input-prefix-cls} &__copy {
    @apply h-4;
    @apply cursor-pointer;

    svg {
      @apply align-top;
    }
  }

  & .@{input-prefix-cls}.is-disabled &__caret {
    @apply fill-color-text-disabled;
    @apply cursor-not-allowed;
  }

  & .@{input-prefix-cls}.is-disabled .@{input-prefix-cls}__inner {
    @apply cursor-not-allowed;
  }

  & .@{input-prefix-cls}.is-focus .@{input-prefix-cls}__inner {
    @apply border-color-border-focus;
  }

  & .@{input-prefix-cls}.show-copy .@{input-prefix-cls}__inner,
  & .@{input-prefix-cls}.show-clear .@{input-prefix-cls}__inner {
    @apply pr-12;
  }

  & .@{input-prefix-cls}.show-copy.show-clear .@{input-prefix-cls}__inner {
    @apply pr-16;
  }

  & > .@{input-prefix-cls} {
    @apply block;
  }

  .@{tag-prefix-cls} {
    @apply ~"max-w-[theme('spacing.36')]";
    @apply py-0 px-2;
    @apply whitespace-nowrap;
    @apply box-border;
    @apply border-transparent;
    @apply ~"my-0.5" mr-1 ml-0;
    @apply text-xs;
    @apply leading-5;

    &:last-child {
      @apply mr-0;
    }
  }

  &__filter-input {
    @apply px-3;
    @apply pt-3;
    @apply pb-1;
    &.@{select-prefix-cls}__remote-input {
      @apply pb-3;
    }
  }

  &__top-create {
    @apply my-0 mx-4;
    @apply border-b border-color-bg-8;

    > div {
      @apply h-9;
      @apply w-fit;
      @apply flex;
      @apply items-center;
      @apply text-xs;
      @apply leading-5;
      @apply text-color-brand;
      @apply cursor-pointer;

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

      svg {
        @apply fill-color-brand;
        @apply text-sm;
        @apply mr-1;
      }
    }
  }
}
