@import (reference) '../theme/variables/antdVariables.less';
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
@border-color-collapse: @border-color-base;
.ued-collapse-wrap {
  .@{collapse-prefix-cls} {
    border-color: @border-color-collapse;
    background-color: transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: none;
    // 默认边框型
    > .@{collapse-prefix-cls}-item {
      border-color: @border-color-collapse;
      flex: none;
      display: flex;
      flex-direction: column;
      border-left: 1px solid @border-color-collapse;
      &.@{collapse-prefix-cls}-item-active {
        flex: 1;
        flex-basis: auto;
      }

      > .@{collapse-prefix-cls}-header {
        position: relative;
        padding: 0;
        font-weight: @font-weight-bold;
        font-size: @font-size-lg;
        line-height: @collapse-header-line-height;
        background-color: @collapse-background-color;
        border-color: @border-color-collapse;
        border-radius: @border-radius-base;

        .ued-collapse-panel-header,
        .ued-collapse-panel-header-default {
          flex: 1;
          padding: @padding-sm @padding-20;
          padding-left: @padding-20 * 2;
          border-radius: @border-radius-base;
        }

        .@{collapse-prefix-cls}-arrow {
          position: absolute;
          top: 50%;
          left: @padding-20;
          line-height: 0;
          transform: translateY(-50%);
        }
      }

      > .@{collapse-prefix-cls}-content {
        flex: none;
        background-color: @component-background;
        &.@{collapse-prefix-cls}-content-active {
          flex: 1;
          flex-basis: auto;
        }
        &.@{collapse-prefix-cls}-content-inactive {
          display: none;
        }
        // 去除动画效果
        &.ant-motion-collapse {
          transition: none!important;
          &.ant-motion-collapse-enter.ant-motion-collapse-enter-active {
            height: auto !important;
          }
        }
        > .@{collapse-prefix-cls}-content-box {
          padding: 0;
          height: 100%;

          .ued-collapse-pane-content {
            // padding: @padding-20;
            height: 100%;
          }
        }

        border-color: @border-color-collapse;
      }
    }

    &.ued-collapse-large {
      > .@{collapse-prefix-cls}-item {
        > .@{collapse-prefix-cls}-header {
          .ued-collapse-panel-header,
          .ued-collapse-panel-header-default {
            padding-top: @padding-md;
            padding-bottom: @padding-md;
          }
        }
      }
    }

    &.ued-collapse-small {
      > .@{collapse-prefix-cls}-item {
        > .@{collapse-prefix-cls}-header {
          .ued-collapse-panel-header,
          .ued-collapse-panel-header-default {
            padding-top: @padding-xs;
            padding-bottom: @padding-xs;
          }
        }
      }
    }

    // 默认分割线
    &.@{collapse-prefix-cls}-borderless:not(.ued-collapse-simple) {
      background-color: transparent;
      border: 0;

      > .@{collapse-prefix-cls}-item {
        border: 0;

        > .@{collapse-prefix-cls}-header {
          border-bottom: 1px solid @border-color-collapse;
          border-radius: 0;
        }

        > .@{collapse-prefix-cls}-content {
          border-top: none;

          > .@{collapse-prefix-cls}-content-box {
            padding: 0;

            // .ued-collapse-pane-content {
            //   // padding: @padding-20;
            // }
          }
        }
      }
    }

    // 简洁型
    &.ued-collapse-simple {
      background-color: transparent;
      border: none;

      > .@{collapse-prefix-cls}-item {
        margin-bottom: 20px;
        border-bottom: none;
        border-radius: @border-radius-base @border-color-collapse 0 0;

        & .@{collapse-prefix-cls}-item-active {
          border-radius: @border-color-base;
        }

        > .@{collapse-prefix-cls}-header {
          background-color: #fafafa;
        }

        .@{collapse-prefix-cls}-content {
          border-top: none;

          &-box {
            // 内边距放到组件中处理
            padding: 0;

            // .ued-collapse-pane-content {
            //   padding: @padding-20;
            // }
          }
        }

        &:last-child {
          margin-bottom: 0;
          > .@{collapse-prefix-cls}-header {
            margin-bottom: 0;
          }

          .@{collapse-prefix-cls}-content-box {
            padding: 0;
          }
        }
      }
    }

    &.@{collapse-prefix-cls}-icon-position-end
      > .@{collapse-prefix-cls}-item
      > .@{collapse-prefix-cls}-header {
      .ued-collapse-panel-header,
      .ued-collapse-panel-header-default {
        padding-right: @padding-20 * 2;
        padding-left: @padding-20;
      }

      .@{collapse-prefix-cls}-arrow {
        right: @padding-20;
        left: auto;
      }
    }
  }
  .@{collapse-prefix-cls}-header-text {
    overflow: hidden;
  }
  .ued-collapse-panel-header-default {
    display: flex;
    align-items: center;
  }
  .ued-collapse-panel-header {
    display: flex;
    align-items: center;

    &::before {
      position: absolute;
      top: 50%;
      left: @padding-xs;
      width: @padding-xxs;
      height: @font-size-lg;
      margin-right: @padding-xs;
      background: @primary-color;
      border-radius: @padding-xxs / 2;
      transform: translateY(-50%);
      content: '';
    }

    .main {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      min-width: 10px;
    }

    &-icon-left {
      &::before {
        left: 0;
        width: @padding-sm;
        height: @padding-sm;
        border-radius: 0 (@padding-sm / 2) (@padding-sm / 2) 0;
      }
    }

    &-icon-auto {
      &::before {
        content: none;
      }

      > i,
      span {
        margin-right: @padding-xs;
        color: @primary-color;
      }
    }
  }

  .ued-collapse-panel-header-sub {
    flex: 1;
    margin-left: 8px;
    overflow: hidden;
    min-width: 20px;
    .sub {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .ued-collapse-expand-icon-arrow {
    svg {
      transform: rotate(-90deg);
      fill: currentColor;
    }

    &.active {
      svg {
        transform: rotate(0);
        fill: currentColor;
      }
    }
  }
}