@import '../common/index.less';

.hairline-common() {
  position: absolute;
  box-sizing: border-box;
  transform-origin: center; /* cover wechat button:after default transforn-origin */
  content: ' ';
  pointer-events: none;
}

.hairline(@border-color: #eee) {
  .hairline-common();
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: 0 solid @border-color;
  transform: scale(0.5);
}

.hairline-bottom(@border-color: #eee, @left: 0) {
  .hairline-common();
  top: auto;
  right: 0;
  bottom: 0;
  left: @left;
  border-bottom: 1px solid @border-color;
  transform: scaleY(0.5);
}

@collapse-header-text-color: @text-level-1-color;
@collapse-content-text-color: @text-level-1-color;
@collapse-header-text-diabled-color: @text-level-4-color;
@collapse-list-content-text-color: @text-level-1-color;

// font-size
@collapse-title-font-size: @font-size * 1.6;
@collapse-extra-font-size: @font-size * 1.6;
@collapse-content-font-size: @font-size * 1.4;

@collapse-header-height: 96rpx;
@collapse-horizontal-padding: 32rpx;
@collapse-content-padding: 32rpx;
@collapse-content-line-height: 1.5;

@collapse-border: 1px solid #eee;
@collapse-shadow-bottom: inset 0 -1px 0 0 #eeeeee;

.@{prefix}-collapse-panel {
  // height: @collapse-header-height;
  overflow: hidden;
  transition: height 200ms ease-in-out;
  box-shadow: @collapse-shadow-bottom;
  background-color: #fff;

  &--active {
    height: auto;
  }

  &--disabled {
    pointer-events: none;

    .@{prefix}-collapse-panel__content,
    .@{prefix}-collapse-panel__header {
      opacity: 0.3;
    }
  }

  &__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: @collapse-horizontal-padding;
    height: @collapse-header-height;
    box-shadow: @collapse-shadow-bottom;
    color: @collapse-header-text-color;
  }

  &__header-right {
    display: inline-flex;
    align-items: center;
    height: 100%;
  }

  // &__header-extra {
  // }

  &__header-icon {
    // 增大热区
    height: 100%;
    padding-left: 8px;
    width: 44px;
    padding-right: 8px;
    color: rgba(0, 0, 0, 40%);
  }

  &__extra {
    font-size: @collapse-extra-font-size;
  }

  &__body {
    box-shadow: @collapse-shadow-bottom;
  }

  &__wrapper {
    transition: height 200ms ease-in-out;
  }

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

.class {
  &-title {
    font-size: @collapse-title-font-size;

    &--disabled {
      color: @text-disabled-color;
    }
  }

  &-note {
    &--disabled {
      color: @text-disabled-color !important;
    }
  }

  &-right-icon {
    &--disabled {
      color: @text-disabled-color !important;
    }
  }
}