@import '../custom.less';

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

.@{collapse-item-prefix-cls} {
  @apply border-b;
  @apply border-b-color-border-separator;

  &:last-child {
    @apply border-b-0;
  }

  &.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;
    }

    .@{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 svg {
        @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';
    @apply -order-1;
    @apply ~'-rotate-90';
    @apply transition-transform duration-300;
    @apply cursor-pointer;

    &:hover {
      svg {
        @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-4 pl-4;
    @apply text-xs;
    @apply text-color-text-primary;
    @apply leading-5;
  }

  // 相对aui,dom结构有所调整，将tiny-collapse-item__header > svg 样式移到此类名下
  &__arrow-icon {
    @apply ~'-mt-px';
    @apply text-xs;
    @apply fill-color-icon-secondary;
    @apply align-baseline;
  }
}
