@import './../theme/vars.scss';

$collapse-prefix-cls: amos-collapse;

.#{$collapse-prefix-cls} {
  background-color: #f7f7f7;
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  border-radius: 4px;

  & > &-item {
    border-bottom: 1px solid #d9d9d9;
  }

  &-header {
    position: relative;
    padding: 8px 32px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    transition: all 0.3s;

    &-arrow {
      > i[class*='icon'] {
        position: absolute;
        margin-right: 6px;
        transform: scale(0.75) rotate(0deg);
        transition: transform 0.24s;
      }
    }

    &-tail {
      flex: 1;
      height: 1px;
      margin-left: 16px;
      background: #d9d9d9;
    }

    &.#{$collapse-prefix-cls}-header-hastail {
      display: flex;
      align-items: center;

      .#{$collapse-prefix-cls}-header-arrow > i {
        top: 8px;
      }
    }

    &.#{$collapse-prefix-cls}-header-arrow-left {
      .#{$collapse-prefix-cls}-header-arrow {
        > i {
          left: 10px;
        }
      }
    }

    &.#{$collapse-prefix-cls}-header-arrow-right {
      .#{$collapse-prefix-cls}-header-arrow {
        > i {
          right: 3px;
        }
      }
    }
  }

  &-active &-header {
    .#{$collapse-prefix-cls}-header-arrow {
      > .aficon-right {
        transform: scale(0.75) rotate(90deg);
      }
    }
  }

  &-content {
    padding: 0 16px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
    background-color: white;

    & > &-box {
      margin-top: 16px;
      margin-bottom: 16px;
    }

    &-inactive {
      display: none;
    }

    &::before,
    &::after {
      display: inline-block;
      height: 10px;
      content: '';
    }

    &::before {
      border-top: 1px solid #d9d9d9;
    }
  }

  &-disabled &-header {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
    background-color: #f7f7f7;
  }

  &.no-border {
    background: transparent;
    border: 0;
  }

  &.no-border & {
    &-item {
      border: 0;
    }

    &-header {
      border-bottom: 1px solid #d9d9d9;
    }
  }

  &.#{$collapse-prefix-cls}-enabletail &-header.#{$collapse-prefix-cls}-header-hastail {
    border-bottom: 0;
  }
}

// add collapse animate
.amos-collapse-anim {
  overflow: hidden;

  &-active {
    transition: height 0.12s, opacity 0.12s;
  }
}