@import '../../style/var';

.hl-collapse-item {
  position: relative;

  &__cell {
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid $collapse-item-border-color;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }

  &__title {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: center;
    cursor: pointer;
    padding: $collapse-item-title-padding;
    color: $collapse-item-title-text-color;
    font-size: $collapse-item-title-font-size;
    height: $collapse-item-title-height;
    background-color: $collapse-item-content-background-color;

    &::after {
      visibility: hidden;
    }

    &-title {
      flex: 1;
    }
    &-icon {
      margin-left: 4px;
      transform: rotate(90deg);
      transition: $collapse-item-transition-duration;
    }

    &--expanded {
      .hl-collapse-item__title-icon {
        transform: rotate(-90deg);
      }

      &::after {
        visibility: visible;
      }
    }

    &--disabled {
      &,
      & .hl-collapse-item__title-icon {
        color: $collapse-item-title-disabled-color;
        cursor: not-allowed;
      }

      .hl-collapse-item__title-icon {
        opacity: $collapse-item-title-disabled-opacity;
      }

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

  &__border {
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      top: 0;
      right: 16px;
      left: 16px;
      border-top: 1px solid $collapse-item-border-color;
      transform: scaleY(0.5);
    }
  }

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

  &__content {
    color: $collapse-item-content-text-color;
    padding: $collapse-item-content-padding;
    font-size: $collapse-item-content-font-size;
    line-height: $collapse-item-content-line-height;
    background-color: $collapse-item-content-background-color;
  }
}