$name: 'ivue-collapse';

:root {
  --#{$name}-radius: 3px;

  // header
  --#{$name}-header-padding: 0 15px;
  --#{$name}-header-height: 38px;
  --#{$name}-header-font-size: 14px;
  --#{$name}-header-icon-font-size: 25px;

  // content
  --#{$name}-content-padding: 15px;

  // color
  --#{$name}-border-color: rgba(0, 0, 0, 0.12);
}

.#{$name} {
  background-color: var(--ivue-primary-color);
  border-radius: var(--#{$name}-radius);
  border: 1px solid var(--#{$name}-border-color);
  overflow: hidden;

  &-panel {
    border-top: 1px solid var(--#{$name}-border-color);

    &:first-child {
      border-top: 0;
    }

    &--header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-content: center;
      padding: var(--#{$name}-header-padding);
      height: var(--#{$name}-header-height);
      line-height: var(--#{$name}-header-height);
      color: var(--ivue-white-color);
      font-size: var(--#{$name}-header-font-size);
      cursor: pointer;
      transition: var(--ivue-all-transition);

      .ivue-icon {
        margin: 0;
        display: flex;
        height: auto;
        min-width: auto;
        width: auto;
        font-size: var(--#{$name}-header-icon-font-size);
        transition: var(--ivue-all-transition);
      }
    }

    &--content {
      padding: 0 var(--#{$name}-content-padding);
      color: var(--ivue-title-color);
      background-color: var(--ivue-white-color);

      &-box {
        padding: var(--#{$name}-content-padding) 0;
        word-break: break-all;
      }
    }

    &--active &--header {
      border-bottom: 1px solid var(--#{$name}-border-color);
    }

    &--active &--header .ivue-icon {
      transform: rotateZ(90deg);
    }
  }

  // 简介模式
  &-simple {
    border-left: none;
    border-right: none;
    background-color: var(--ivue-white-color);
    border-radius: 0;

    .#{$name}-panel--header {
      color: var(--ivue-title-color);
      border-bottom: 1px solid transparent;
    }

    .#{$name}-panel--content-box {
      padding-top: 0;
    }
  }
}

.collapse-transition {
  transition: 0.2s height var(--ivue-ease-in-out),
    0.2s padding-top var(--ivue-ease-in-out),
    0.2s padding-bottom var(--ivue-ease-in-out);
}