.nut-collapse-item {
  &__header {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: $collapse-item-padding;
    font-size: $collapse-item-font-size;
    line-height: $collapse-item-line-height;
    background-color: $background-color3;
    box-sizing: border-box;

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

  &__title {
    color: $collapse-item-color;
    display: flex;
    align-items: center;
  }

  &__extra {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding: 0px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: $collapse-item-extra-color;
  }

  &__icon-box {
    display: flex;
    padding-right: 40px;
    position: relative;
  }

  &__icon {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    transform-origin: center;
    transition: transform 0.3s;
  }

  &__header--disabled {
    color: $collapse-item-disabled-color;

    .nut-collapse-item__title {
      color: $collapse-item-disabled-color;
    }
  }

  &__content {
    overflow: hidden;
    display: block;
    color: $collapse-wrapper-content-color;
    font-size: $collapse-wrapper-content-font-size;
    line-height: $collapse-wrapper-content-line-height;
    background-color: $collapse-wrapper-content-background-color;
    transition: all 0.3s linear;

    &-text {
      color: $collapse-wrapper-content-color;
      padding: $collapse-wrapper-content-padding;
    }
  }
}