@import '../mixins/input.less';
@import '../mixins/common.less';
@import '../custom.less';


@numeric-prefix-cls: ~'@{css-prefix}numeric';
@input-prefix-cls: ~'@{css-prefix}input';
@radio-prefix-cls: ~'@{css-prefix}radio';
@filter-panel-prefix-cls: ~'@{css-prefix}filter-panel';

.@{numeric-prefix-cls} {
  @apply relative;
  @apply inline-block;
  @apply w-28;
  @apply select-none;

  &--base{
    @apply w-full;
    @apply inline-block;
  }

  &__input {
    @apply block;
    @apply box-border;
    @apply h-7;
    @apply leading-normal;
    @apply py-0 px-8;
    @apply border border-solid border-color-border;
    @apply rounded-form;
    @apply bg-color-bg-1;

    &.@{numeric-prefix-cls}__read-only {
      @apply bg-transparent;
    }

    &:not(.is-disabled):hover {
      @apply border-color-border-hover;
    }

    &:not(.is-disabled):focus-within {
      @apply border-color-border-focus;
    }

    &.is-disabled {
      @apply border border-solid border-color-border-separator;
      @apply bg-color-bg-6;

      .@{numeric-prefix-cls}__input-inner {
        @apply cursor-not-allowed;
        @apply pointer-events-none;
        @apply border border-solid border-transparent;
        @apply text-color-text-secondary;
        @apply bg-transparent;
        .placeholder(@color: theme('colors.color.text.placeholder'));
      }

      .@{input-prefix-cls}__icon {
        @apply cursor-not-allowed;
      }
    }

    &.has-unit {
      @apply py-0 pr-14 pl-2;
    }

    &.text-align-left {
      .@{numeric-prefix-cls}__input-inner {
        @apply text-left;
      }
    }

    &.@{numeric-prefix-cls}__controls-position {
      @apply p-0;
    }
  }

  &__input-inner {
    @apply w-full;
    @apply h-full;
    @apply border-none;
    @apply text-color-text-primary;
    @apply bg-color-bg-1;
    @apply outline-0;
    @apply inline-block;
    @apply box-border;
    @apply appearance-none;
    @apply text-center;
    @apply text-sm;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    @apply p-0;
    .placeholder(@color: theme('colors.color.text.placeholder'));

    &:focus-visible {
      outline: none;
    }

    &:focus,
    &:active {
      @apply bg-color-bg-1;
      @apply outline-0;
      .placeholder(@color: theme('colors.color.text.placeholder'));
    }

    &::-ms-clear {
      @apply hidden;
      @apply w-0;
      @apply h-0;
    }

    &.@{numeric-prefix-cls}__show-left{
      @apply text-left;
    }
  }

  &__decrease,
  &__increase {
    @apply flex;
    @apply justify-center;
    @apply items-center;
    @apply absolute;
    @apply ~'z-[1]';
    @apply top-0;
    @apply w-7;
    @apply h-full;
    @apply text-sm;
    @apply text-center;
    @apply cursor-pointer;

    svg {
      @apply w-4;
      @apply h-4;
      @apply fill-color-icon-primary;
    }

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

    &:active {
      @apply bg-transparent;
      @apply border-color-brand-active;

      svg {
        @apply fill-color-icon-active;
      }
    }

    &.is-disabled {
      @apply cursor-not-allowed;

      svg {
        @apply fill-color-text-disabled;
      }
    }

    &::after {
      @apply content-[''];
      @apply inline-block;
      @apply w-px;
      @apply h-4;
      @apply absolute;
      @apply ~'top-1/2';
      @apply ~'-translate-x-2/4' ~'-translate-y-2/4';
      @apply bg-color-text-disabled;
    }
  }

  &__increase {
    @apply right-0;
    @apply rounded-tl-none rounded-tr-sm rounded-br-sm rounded-bl-none;

    &::after {
      @apply -left-px;
    }
  }

  &__decrease {
    @apply left-0;
    @apply rounded-tl-sm rounded-tr-none rounded-br-none rounded-bl-sm;

    &::after {
      @apply -right-px;
    }
  }

  &__unit {
    @apply right-0;
    @apply absolute;
    @apply ~'z-[1]';
    @apply top-px;
    @apply w-12;
    @apply ~'h-[calc(100%-theme(spacing[0.5]))]';
    @apply text-color-text-disabled;
    @apply text-sm;
    @apply flex;
    @apply justify-center;
    @apply items-center;
    @apply border-l border-l-color-border;
    @apply mt-0 mr-px mb-0 ml-0;
    @apply bg-color-bg-2;
    @apply rounded-tl-none rounded-tr-sm rounded-br-sm rounded-bl-none;
  }

  &.is-disabled {
    @apply bg-color-bg-6;

    .@{numeric-prefix-cls}__decrease,
    .@{numeric-prefix-cls}__increase {
      @apply border-transparent;

      svg {
        @apply fill-color-text-disabled;
      }

      &:hover {
        @apply cursor-not-allowed;

        svg {
          @apply fill-color-text-disabled;
        }
      }
    }
  }

  &.is-disabled.is-display-only {
    @apply flex;
    background: none;
  }

  &.is-display-only {
    .@{numeric-prefix-cls}-display-only {
      .@{numeric-prefix-cls}-display-only__content {
        @apply truncate;
      }
    }
    .@{numeric-prefix-cls}-display-only__unit {
      @apply ~'ml-[8px]';
    }
    .@{numeric-prefix-cls}__input {
      @apply border-none;
      @apply p-0;
      @apply leading-4;
      @apply h-4;

      &.@{input-prefix-cls}-small,
      &.@{input-prefix-cls}-medium,
      &.@{input-prefix-cls}-mini {
        @apply border-none;
        @apply p-0;
        @apply leading-4;
        @apply h-4;
      }
    }

    .@{numeric-prefix-cls}__input-inner,
    .@{numeric-prefix-cls}__unit,
    .@{numeric-prefix-cls}__decrease,
    .@{numeric-prefix-cls}__increase {
      @apply hidden;
    }
  }

  &--medium {
    @apply w-32;
    @apply h-8;

    .@{numeric-prefix-cls}__decrease,
    .@{numeric-prefix-cls}__increase {
      @apply w-8;
      @apply text-base;
    }

    .@{numeric-prefix-cls}__input {
      @apply py-0 px-4;
      @apply h-8;

      &.has-unit {
        @apply py-0 pr-14 pl-3;
      }
    }

    .@{numeric-prefix-cls}__input-inner {
      @apply h-full;
      @apply text-sm;
    }
  }

  &--small {
    @apply w-28;
    @apply h-7;

    .@{numeric-prefix-cls}__decrease,
    .@{numeric-prefix-cls}__increase {
      @apply w-7;
      @apply text-sm;
    }

    .@{numeric-prefix-cls}__input {
      @apply py-0 px-4;
      @apply h-7;

      &.has-unit {
        @apply py-0 pr-14 pl-2;
      }
    }

    .@{numeric-prefix-cls}__input-inner {
      @apply h-full;
    }
  }

  &--mini {
    @apply w-24;
    @apply h-6;

    .@{numeric-prefix-cls}__decrease,
    .@{numeric-prefix-cls}__increase {
      @apply w-6;
      @apply leading-5;
      @apply text-xs;
    }

    .@{numeric-prefix-cls}__input {
      @apply py-0 px-4;
      @apply h-6;

      &.has-unit {
        @apply py-0 pr-14 pl-2;
      }
    }

    .@{numeric-prefix-cls}__input-inner {
      @apply h-full;
      @apply text-xs;
    }
  }

  &.is-without-controls {
    .@{numeric-prefix-cls}__input {
      @apply py-0 px-2;
    }
    .@{numeric-prefix-cls}__input {
      &.has-unit {
        padding: 0 58px 0 8px;
      }
      &.text-align-left {
        .@{numeric-prefix-cls}__input-inner {
          @apply text-left;
        }
      }
      &.@{numeric-prefix-cls}__read-only{
        @apply p-0; 
      }
    }
  }

  &.is-controls-right {
    .@{numeric-prefix-cls}__input-inner {
      @apply pl-2;
      @apply pr-9;
      @apply rounded-form;
    }

    .@{numeric-prefix-cls}__decrease,
    .@{numeric-prefix-cls}__increase {
      @apply ~'h-3.5';

      svg {
        @apply scale-75;
      }

      &::after {
        @apply content-none;
      }
    }

    .@{numeric-prefix-cls}__increase {
      @apply rounded-b-none rounded-tl-none rounded-tr;
      @apply border-b border-b-color-border;
      @apply border-l border-l-color-border;
      @apply right-px;
    }

    .@{numeric-prefix-cls}__decrease {
      @apply right-px;
      @apply bottom-px;
      @apply top-auto;
      @apply left-auto;
      @apply border-r-0;
      @apply border-l border-l-color-border;
      @apply rounded-t-none rounded-bl-none rounded-br;

      svg {
        @apply scale-75;
      }
    }

    &[class*='medium'] {
      [class*='decrease'],
      [class*='increase'] {
        @apply leading-5;
        @apply h-4;
      }
    }

    &[class*='small'] {
      [class*='decrease'],
      [class*='increase'] {
        @apply leading-4;
        @apply ~'h-3.5';
      }
    }

    &[class*='mini'] {
      [class*='decrease'],
      [class*='increase'] {
        @apply leading-3;
        @apply h-3;
      }
    }
  }

  &__popover-filter-content {
    @apply ~'w-[theme(spacing.54)]';
    @apply mb-1;
    @apply text-xs;
    @apply cursor-pointer;

    .@{radio-prefix-cls}-group {
      @apply inline-block;
    }
    .popover-filter-botton {
      @apply bg-color-bg-2;
      @apply py-px;
      @apply box-border;
      @apply mb-2;
      @apply mr-2;
      @apply ml-0;
      @apply inline-flex;
      @apply items-center;
      @apply justify-center; 
      @apply h-6;
      @apply rounded-form;
      @apply ~'min-w-[theme(spacing.12)]';
      @apply text-center;
      @apply max-w-none;
      @apply px-2;
      @apply border;
      @apply border-color-bg-2;
      @apply border-solid;
      @apply font-normal;

      &.is-checked {
        @apply text-color-brand;
        @apply border-color-brand;
      }

      .@{radio-prefix-cls}__input {
        @apply hidden;
      }

      .@{radio-prefix-cls}__label {
        @apply px-0;
        @apply leading-5;
        @apply h-5;
        @apply inline-block;
      }
    }
  }
  
  &.is-filter{
    @apply w-full;
  }
}

.@{filter-panel-prefix-cls}{
  &__popover{
    @apply !px-3;
    @apply !py-4;
  }
}