/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import './mixin.less';

@collapse-prefix-cls: ~'@{kd-prefix}-collapse';
.@{collapse-prefix-cls} {
  display: flex;
  flex-direction: column;
  width: 100%;
  &-panel:last-child {
    border-top: none;
  }
  &-panel-border&-panel:first-child {
    border-top: @collapse-border-width solid @collapse-border-color;
  }
  &-panel-border&-panel:not(:nth-child(1)) {
    border-top: none;
  }
  &-panel {
    display: inline-flex;
    flex-direction: column;
    &-border {
      border: @collapse-border-width solid @collapse-border-color;
    }

    &-top {
      display: inline-flex;
      padding: @collapse-header-padding;
      background: @collapse-header-color-background;
    }
    &-no-assist {
      justify-content: space-between;
    }
    &-top-border {
      border-bottom: @collapse-border-width solid @collapse-border-color;
    }
    &-left {
      display: inline-flex;
      align-items: center;
      line-height: 1.5;
    }
    &-middle {
      display: inline-flex;
      align-items: center;
      flex: 1;
      margin-left: 22px;
      color: @collapse-header-font-color-secondary;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &-right {
      margin-left: 40px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }
    &-extra,
    &-header {
      display: inline-flex;
      align-items: center;
      color: @collapse-header-font-color;
      font-size: @collapse-header-font-size;
    }

    &-header {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        color: @collapse-header-color-text-hover;
      }
    }
    &-icon {
      align-items: center;
      display: inline-flex;
      margin-right: @collapse-icon-margin-right;
      font-size: @collapse-icon-font-size;
    }
    &-icon:hover,
    &-left:hover {
      cursor: pointer;
    }
    &-animation-expand {
      transform: rotate(0deg);
      transition: transform @collapse-transition-duration;
    }
    &-animation-collapse {
      transform: rotate(90deg);
      transition: transform @collapse-transition-duration;
    }
    &-children {
      overflow: hidden;
      opacity: 0;
      padding: @collapse-content-padding;
      color: @collapse-content-font-color;
      font-size: @collapse-content-font-size;
      transition: height @collapse-transition-duration, opacity @collapse-transition-duration;
      background: @collapse-content-color-background;
    }
    &-children-hide {
      overflow: hidden;
      opacity: 0;
      height: 0;
      padding: @collapse-content-padding;
      color: @collapse-content-font-color;
      font-size: @collapse-content-font-size;
      transition: height @collapse-transition-duration, opacity calc(@collapse-transition-duration / 2);
    }
    &-children-bordered {
      padding: @collapse-content-bordered-padding;
      overflow: hidden;
    }
    &-disabled {
      cursor: not-allowed !important;
      color: @collapse-disabled-color;
    }
  }
}
.@{collapse-prefix-cls}-rtl {
  direction: rtl;
  .@{collapse-prefix-cls}-panel {
    &-top {
      padding: 8px 28px 8px 50px;
      .@{collapse-prefix-cls}-panel-right {
        margin-right: 40px;
        margin-left: 0;
      }
    }
    &-icon {
      margin-left: @collapse-icon-margin-right;
      margin-right: 0;
    }
    &-animation-expand {
      transform: rotate(180deg);
    }
    &-children > div {
      text-align: right;
    }
    &-children-hide > div {
      text-align: right;
    }
    &-middle {
      margin-right: 22px;
      margin-left: 0;
    }
  }
}
/*! rtl:end:ignore */