@import '../custom.less';

@slider-button-prefix-cls: ~'@{css-prefix}slider-button';

.@{slider-button-prefix-cls} {
  @apply inline-flex;
  @apply relative;
  @apply outline-0;
  @apply cursor-pointer;
  @apply items-center;
  @apply w-auto;
  @apply ~'m-0.5';

  &.@{slider-button-prefix-cls}--flex {
    @apply w-full;
  }

  &.@{slider-button-prefix-cls}--large {
    @apply m-1;
  }

  .@{slider-button-prefix-cls}__input {
    @apply opacity-0;
    @apply outline-0;
    @apply absolute;
    @apply -z-10;
  }

  .@{slider-button-prefix-cls}__text {
    @apply relative;
    @apply items-center;
    @apply text-center;
    @apply overflow-hidden;
    @apply text-ellipsis;
    @apply whitespace-nowrap;
    @apply cursor-pointer;
    @apply box-border;
  }

  .@{slider-button-prefix-cls}__text--secondary {
    @apply shadow-none;
    @apply text-color-text-secondary;

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

  .@{slider-button-prefix-cls}__text--selected {
    @apply text-color-brand;

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

  .@{slider-button-prefix-cls}__text--type-icon {
    @apply flex;
    @apply items-center;
    @apply justify-center;
    @apply w-6;
    @apply h-6;
    @apply p-1;

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

  .@{slider-button-prefix-cls}__text--normal {
    @apply inline-block;
  }

  .@{slider-button-prefix-cls}__text--large-icon {
    @apply w-10;
    @apply h-10;
    @apply p-2;
  }

  .@{slider-button-prefix-cls}__text--large-normal-icon {
    @apply h-10 px-4;
    @apply ~'min-w-[theme(spacing.12)]';
    @apply ~'max-w-[theme(spacing.32)]';
    @apply text-sm;
    @apply leading-10;
  }

  .@{slider-button-prefix-cls}__text--normal-large-normal-icon {
    @apply h-6;
    @apply px-2;
    @apply ~'min-w-[theme(spacing.10)]';
    @apply ~'max-w-[theme(spacing.28)]';
    @apply text-xs;
    @apply leading-6;
  }

  .@{slider-button-prefix-cls}__text--medium-icon {
    @apply w-7 h-7 p-1;

    svg {
      @apply ~'w-4.5';
      @apply ~'h-4.5';
    }
  }

  .@{slider-button-prefix-cls}__text--medium {
    @apply text-sm;
    @apply h-7;
    @apply leading-7;
  }

  .@{slider-button-prefix-cls}__text--icon-fill-brand {
    @apply fill-color-brand;

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

  .@{slider-button-prefix-cls}__text--fill-brand {
    @apply fill-color-none-hover;

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

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

  .@{slider-button-prefix-cls}__text--icon-fill-brand-disabled {
    @apply fill-color-brand-disabled;
    @apply cursor-not-allowed;
  }

  .@{slider-button-prefix-cls}__text--fill-brand-disabled {
    @apply text-color-brand-disabled;
    @apply cursor-not-allowed;
  }

  .@{slider-button-prefix-cls}__text--normal-icon-fill-brand-disabled {
    @apply fill-color-icon-disabled;
    @apply cursor-not-allowed;
  }

  .@{slider-button-prefix-cls}__text--normal-fill-brand-disabled {
    @apply text-color-text-disabled;
    @apply cursor-not-allowed;
  }
}