@import 'src/global/styles/var';
@import '../../global/styles/mixins/hairline.less';

.glue-collapse-item {
  position: relative;
  display: block;

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

  &__title {
    .glue-cell__right-icon::before {
      transform: rotate(90deg);
      transition: transform @collapse-item-transition-duration;
    }

    &::after {
      right: @padding-md;
      display: none;
    }

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

      &::after {
        display: block;
      }
    }

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

    &--disabled {
      cursor: not-allowed !important;

      &,
      & .glue-cell__right-icon {
        color: @collapse-item-title-disabled-color !important;
      }

      &:active {
        background-color: @white;
      }
    }
  }

  &__wrapper {
    overflow: hidden;
    transition: height @collapse-item-transition-duration ease-in-out;
    will-change: height;
  }

  &__content {
    padding: @collapse-item-content-padding;
    color: @collapse-item-content-text-color;
    font-size: @collapse-item-content-font-size;
    line-height: @collapse-item-content-line-height;
    background-color: @collapse-item-content-background-color;
    position: relative;

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