@import url(../var.less);

@collapse-prefix: ~"@{prefix}collapse";
@collapse-item-prefix: ~"@{prefix}collapse-item";

.@{collapse-prefix}{
  border: @border-base;

  &.no-bordered {
    border-color: transparent;
    .w-collapse {
      border: transparent;
    }

    .w-collapse-item__header {
      &.is-active {
        border-color: transparent;
      }
    }

    .w-collapse-item__wrap {
      background-color: @collapse-header-background-color;
    }
  }

  &.is-title-icon-right {
    .w-collapse-item__header {
      position: relative;
    }
    .w-collapse-item__arrow {
      position: absolute;
      right: 0;
    }

    .w-collapse-item__extra {
      margin: 0 10px 0 auto;
    }
  }

  &.is-ghost {
    border: 0;

    .w-collapse-item__header, .w-collapse-item__wrap, .w-collapse {
      background-color: transparent;
      border: 0;
    }
  }
}

.@{collapse-item-prefix}{
  &.is-disabled {
    .w-collapse-item__header {
      color: @font-color-disabled-base;
      cursor: not-allowed;
    }
  }

  &__header {
    display: flex;
    align-items: center;
    height: @collapse-header-height;
    line-height: @collapse-header-height;
    background-color: @collapse-header-background-color;
    color: @collapse-header-font-color;
    cursor: pointer;
    border-bottom: 1px solid @collapse-border-color;
    font-size: @collapse-header-font-size;
    padding: @collapse-header-padding;
    transition: border-bottom-color .3s;
    outline: none;

    .w-collapse-item__arrow {
      transition: transform .3s;
      margin-right: 16px;

      &.is-active {
        transform: rotate(90deg);
      }
    }

    .w-collapse-item__extra {
      margin: 0 0 0 auto;
    }

    &.focusing:focus:not(:hover){
      color: @primary-color;
    }

  }

  &__wrap {
    will-change: height;
    background-color: @collapse-content-background-color;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid @collapse-border-color;
  }

  &__content {
    padding: @collapse-content-padding;
    font-size: @collapse-content-font-size;
    color: @collapse-content-font-color;
    line-height: 1.769230769230769;
  }

  &:last-child {
    margin-bottom: -1px;
  }
}