@import '../mixins/common.less';
@import '../custom.less';
@import '../transition/timepicker.less';

.@{date-container-prefix-cls} {
  @apply relative;
}

.@{date-editor-prefix-cls} {
  @apply relative;
  @apply inline-block;
  @apply text-left;

  .@{input-prefix-cls}__icon {
    @apply fill-color-text-placeholder;

    svg:hover {
      @apply fill-color-text-placeholder;
    }

    svg.baseClearicon:hover {
      @apply fill-color-icon-primary;
    }
  }

  &.@{input-prefix-cls},
  &.@{input-prefix-cls}__inner {
    @apply w-full;
  }

  &--monthrange {
    &.@{input-prefix-cls},
    &.@{input-prefix-cls}__inner {
      width: 300px;
    }
  }

  &.show-auto-width {
    &.@{input-prefix-cls},
    &.@{input-prefix-cls}__inner {
      @apply w-full;
    }
  }

  &--daterange,
  &--timerange {
    &.@{input-prefix-cls},
    &.@{input-prefix-cls}__inner {
      width: 350px;
    }
  }

  &--datetimerange {
    &.@{input-prefix-cls},
    &.@{input-prefix-cls}__inner {
      width: 400px;
    }
  }

  &--dates {
    .@{input-prefix-cls}__inner {
      .text-overflow();
    }
  }

  .@{input-prefix-cls}__label {
    @apply text-color-text-placeholder;
    @apply text-xs;
    @apply mr-2;
    @apply inline-block;
    @apply text-left;
    .text-overflow();
    max-width: 100px;
  }

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

    .baseClearicon {
      @apply mr-2;
      @apply !transform-none;
    }

    &:not(.@{range-prefix-cls}__icon) {
      @apply flex;
    }
  }

  .@{range-prefix-cls}__icon {
    @apply text-base;
    @apply text-color-text-secondary;
    margin-left: -5px;
    @apply float-left;
    @apply leading-none;
  }

  .@{range-prefix-cls}-input,
  .@{range-prefix-cls}-separator {
    @apply text-xs;
    @apply h-full;
    @apply m-0;
    @apply text-center;
    @apply inline-block;
  }

  .@{range-prefix-cls}-input {
    &:focus-visible {
      outline: none;
    }

    @apply appearance-none;
    @apply border-none;
    @apply outline-0;
    @apply p-0;
    @apply ~'w-[35%]';
    @apply text-color-text-primary;
    .text-overflow();
    .placeholder();
  }

  .@{range-prefix-cls}-separator {
    padding: 0 5px;
    line-height: 20px;
    width: 12%;
    @apply text-color-text-primary;
  }

  .@{range-prefix-cls}__close-icon {
    @apply absolute;
    @apply ~'right-1.5';
    @apply text-base;
    width: 25px;
    float: right;
    @apply leading-8;
    @apply mr-5;
    @apply flex;
    @apply justify-center;
    @apply items-center;
  }
}

.@{range-editor-prefix-cls} {
  &:not(.is-display-only).@{input-prefix-cls}__inner {
    @apply relative;
    @apply inline-flex;
    @apply items-center;
    padding: 3px 10px;
  }

  &:not(.is-display-only) .@{range-prefix-cls}-input {
    @apply leading-none;
  }

  &:not(.is-display-only).is-active,
  &:not(.is-display-only).is-active:hover {
    @apply border-color-border-focus;
  }

  &--medium:not(.is-display-only) {
    &.@{input-prefix-cls}__inner {
      height: 42px;
    }

    .@{range-prefix-cls}-separator {
      line-height: 34px;
      @apply text-xs;
    }

    .@{range-prefix-cls}-input {
      @apply text-xs;
    }

    .@{range-prefix-cls}__close-icon,
    .@{range-prefix-cls}__icon {
      line-height: 34px;
    }
  }

  &--small:not(.is-display-only) {
    &.@{input-prefix-cls}__inner {
      @apply h-9;
    }

    .@{range-prefix-cls}-separator {
      @apply leading-7;
      @apply text-sm;
    }

    .@{range-prefix-cls}-input {
      @apply text-sm;
    }

    .@{range-prefix-cls}__close-icon,
    .@{range-prefix-cls}__icon {
      @apply leading-7;
    }
  }

  &--mini:not(.is-display-only) {
    &.@{input-prefix-cls}__inner {
      @apply h-6;
    }

    .@{range-prefix-cls}-separator {
      @apply leading-4;
      @apply text-xs;
    }

    .@{range-prefix-cls}-input {
      @apply text-xs;
    }

    .@{range-prefix-cls}__close-icon,
    .@{range-prefix-cls}__icon {
      @apply leading-4;
    }
  }

  &:not(.is-display-only).is-disabled {
    @apply bg-color-border-disabled;
    @apply border-color-border;
    @apply text-color-text-disabled;
    @apply cursor-not-allowed;

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

    input {
      @apply text-color-text-disabled;
      @apply bg-color-bg-3;
      @apply cursor-not-allowed;
      .placeholder();
    }

    .@{range-prefix-cls}-separator {
      @apply text-color-text-disabled;
    }
  }
}

.@{range-editor-prefix-cls}.is-display-only {
  @apply relative;
  @apply border-0;

  & > *:not(.@{range-editor-prefix-cls}-display-only) {
    @apply invisible;
  }

  & > .@{range-editor-prefix-cls}-display-only {
    @apply absolute;
    @apply top-2/4;
    @apply left-0;
    @apply ~'-translate-y-2/4';
    @apply max-w-full;
    @apply truncate;
    @apply text-xs;
  }
}

.@{scrollbar-prefix-cls} {
  @apply overflow-hidden;
  @apply relative;

  &:active > &__bar,
  &:focus > &__bar,
  &:hover > &__bar {
    @apply opacity-100;
    transition: opacity 340ms ease-out;
  }

  &__wrap {
    @apply overflow-scroll;
    @apply h-full;
  }

  &__wrap--hidden-default::-webkit-scrollbar {
    @apply w-0;
    @apply h-0;
  }

  &__thumb {
    @apply relative;
    @apply block;
    @apply w-0;
    @apply h-0;
    @apply cursor-pointer;
    border-radius: inherit;
    @apply bg-color-fill-1;
    transition: 0.3s background-color;

    &:hover {
      @apply bg-color-fill-7;

      &__bar.is-vertical {
        @apply ~'w-2.5';
      }

      &__bar.is-horizontal {
        @apply ~'h-2.5';
      }
    }
  }

  &__bar {
    @apply absolute;
    @apply ~'right-0.5';
    @apply ~'bottom-0.5';
    @apply ~'z-[1]';
    @apply rounded-full;
    @apply opacity-0;
    transition: opacity 120ms ease-out;

    &.is-vertical {
      @apply ~'w-1.5';
      @apply ~'top-0.5';

      & > div {
        @apply w-full;
      }

      &:has(.@{css-prefix}scrollbar__thumb:hover) {
        @apply ~'w-2.5';
      }
    }

    &.is-horizontal {
      @apply ~'h-1.5';
      @apply ~'left-0.5';

      & > div {
        @apply h-full;
      }

      &:has(.@{css-prefix}scrollbar__thumb:hover) {
        @apply ~'h-2.5';
      }
    }
  }
}
