@import '../custom.less';

@collapse-item-prefix-cls: ~'@{css-prefix}collapse-item';

.@{collapse-item-prefix-cls} {
  + .@{collapse-item-prefix-cls} {
    @apply mt-2;
  }

  &.is-disabled &__header {
    .@{collapse-item-prefix-cls}__word-overflow {
      @apply text-color-text-disabled;
      @apply cursor-not-allowed;
    }

    &:has(.@{collapse-item-prefix-cls}__word-overflow:hover) {
      .@{collapse-item-prefix-cls}__arrow {
        @apply fill-color-text-disabled;
        @apply cursor-not-allowed;
      }
    }

    &:has(.@{collapse-item-prefix-cls}__arrow:hover) {
      .@{collapse-item-prefix-cls}__word-overflow {
        @apply text-color-text-disabled;
        @apply cursor-not-allowed;
      }
    }
  }

  &.is-disabled &__arrow {
    @apply fill-color-text-disabled;
    @apply cursor-not-allowed;
  }

  &__header {
    @apply flex;
    @apply items-center;
    @apply h-10;
    @apply leading-10;
    @apply rounded;
    @apply text-color-text-primary;
    @apply py-0 pl-0;
    @apply text-sm;
    @apply font-bold;
    @apply outline-0;
    transition: border-bottom-color 0.3s;

    &.is-active {
      @apply border-b-transparent;
    }

    > svg {
      @apply ~'-mt-px';
      @apply text-sm;
      @apply fill-color-icon-secondary;
    }

    .@{collapse-item-prefix-cls}__word-overflow {
      @apply whitespace-nowrap;
      @apply overflow-hidden;
      @apply text-ellipsis;
      @apply inline-block;

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

    &:has(.@{collapse-item-prefix-cls}__word-overflow:hover) {
      .@{collapse-item-prefix-cls}__arrow {
        @apply fill-color-brand;
      }
    }

    &:has(.@{collapse-item-prefix-cls}__arrow:hover) {
      .@{collapse-item-prefix-cls}__word-overflow {
        @apply text-color-brand;
      }
    }

    svg {
      @apply shrink-0;
    }
  }

  &__title__right {
    @apply ml-auto;
  }

  &__arrow {
    @apply text-xs;
    @apply ~'mr-1.5';
    @apply -order-1;
    @apply ~'-rotate-90';
    @apply transition-transform duration-300;
    @apply cursor-pointer;

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

    &.is-active {
      @apply rotate-0;
    }
  }

  &__word-overflow {
    @apply cursor-pointer;
  }

  &__wrap {
    @apply ~'will-change-[height]';
    @apply overflow-hidden;
    @apply box-border;
  }

  &__content {
    @apply pb-2 pl-5;
    @apply text-xs;
    @apply text-color-text-primary;
    @apply leading-5;
  }
}
