@import './var.less';
@import '../style/mixins/hairline';

:root {
  --van-collapse-item-transition-duration: @collapse-item-transition-duration;
  --van-collapse-item-content-padding: @collapse-item-content-padding;
  --van-collapse-item-content-font-size: @collapse-item-content-font-size;
  --van-collapse-item-content-line-height: @collapse-item-content-line-height;
  --van-collapse-item-content-text-color: @collapse-item-content-text-color;
  --van-collapse-item-content-background-color: @collapse-item-content-background-color;
  --van-collapse-item-title-disabled-color: @collapse-item-title-disabled-color;
}

.van-collapse-item {
  position: relative;

  &--border {
    &::after {
      .hairline-top(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
    }
  }

  &__title {
    .van-cell__right-icon::before {
      // using translateZ to fix safari rendering issues
      // see: https://github.com/vant-ui/vant/issues/8608
      transform: rotate(90deg) translateZ(0);
      transition: transform var(--van-collapse-item-transition-duration);
    }

    &::after {
      right: var(--van-padding-md);
      display: none;
    }

    &--expanded {
      .van-cell__right-icon::before {
        transform: rotate(-90deg);
      }

      &::after {
        display: block;
      }
    }

    &--borderless {
      &::after {
        display: none;
      }
    }

    &--disabled {
      cursor: not-allowed;

      &,
      & .van-cell__right-icon {
        color: var(--van-collapse-item-title-disabled-color);
      }
    }
  }

  &__wrapper {
    overflow: hidden;
    transition: height var(--van-collapse-item-transition-duration) ease-in-out;
    will-change: height;
  }

  &__content {
    padding: var(--van-collapse-item-content-padding);
    color: var(--van-collapse-item-content-text-color);
    font-size: var(--van-collapse-item-content-font-size);
    line-height: var(--van-collapse-item-content-line-height);
    background: var(--van-collapse-item-content-background-color);
  }
}