@import '../../style/mixins';
@import '../../style/themes/default';

@accordionPrefixCls: am-accordion;

.am-list-line:after {
  content: none !important;
}


// .hairline2(@direction, @color: @border-color-base) when (@direction = 'bottom') {
//   border-bottom: 1PX solid @color;
//   @media (min-resolution: 2dppx) {
//     border-bottom: none;
//     &:after {
//       .scale-hairline-common(@color, auto, auto, 0, 0);
//       width: 100%;
//       height: 1PX;
//       transform-origin: 50% 100%;
//       transform: scaleY(0.5);
//       @media (min-resolution: 3dppx) {
//         transform: scaleY(0.33);
//       }
//     }
//   }
// }

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
  content: '';
  position: absolute;
  background-color: @color;
  display: block;
  z-index: 1;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

.@{accordionPrefixCls} {
  position: relative;
  // &-anim-active {
  //   transition: height .2s ease-out, transform .2s ease-out;
  // }

  &-item {
    .@{accordionPrefixCls}-header {
      position: relative;
      color: @color-text-base;
      font-size: @font-size-heading;
      height: @list-item-height;
      line-height: @list-item-height;
      background-color: @fill-base;
      box-sizing: content-box;
      overflow: hidden;
      padding-left: @h-spacing-lg;
      padding-right: 2 * @h-spacing-lg;
      .ellipsis();

      i {
        position: absolute;
        display: block;
        top: @h-spacing-lg;
        right: @h-spacing-lg;
        width: @icon-size-xxs;
        height: @icon-size-xxs;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        transform: rotate(90deg);
        .encoded-svg-background('right');
        //background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate(-5809.000000%2C%20-8482.000000");
        transition: transform .2s ease;
      }

      &[aria-expanded="true"] {
        i {
          transform: rotate(270deg);
          // animation:mymove 0.3s 1;
        }
        .hairline('bottom', #E6E7E8);
        //.hairline('bottom', #E6E7E8);
      }
    }

    .@{accordionPrefixCls}-content {
      overflow: hidden;
      background: @fill-base;
      transition: height 0.2s ease;
      //.hairline('bottom', #E6E7E8);
      .@{accordionPrefixCls}-content-box {
        font-size: @font-size-subhead;
        color: @color-text-paragraph;
        position: relative;
        //.hairline('top', #E6E7E8);
        .am-list-body {
          .hairline-remove('top');
        }
      }
      &.@{accordionPrefixCls}-content-active {
        max-height: 999px;
      }
      &.@{accordionPrefixCls}-content-inactive {
        //display: none;
        height: 0;
        // .hairline-remove('top');
        // .hairline-remove('bottom');
      }
    }
  }
}
.rc-collapse {
  background-color: #f7f7f7;
  border-radius: 3px;
  border: 0px solid #d9d9d9 !important;
}
.rc-collapse-anim-active {
  transition: height 0.2s ease-out;
}
.rc-collapse > .rc-collapse-item {
  border-top: 0px solid #d9d9d9 !important;
}
.rc-collapse > .rc-collapse-item:first-child {
  border-top: none;
}
.rc-collapse > .rc-collapse-item > .rc-collapse-header {
  height: 38px;
  line-height: 38px;
  text-indent: 16px;
  color: #666;
  cursor: pointer;
}
.rc-collapse > .rc-collapse-item > .rc-collapse-header .arrow {
  display: inline-block;
  content: '\20';
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid #666;
  vertical-align: middle;
  margin-right: 8px;
}
.rc-collapse > .rc-collapse-item-disabled > .rc-collapse-header {
  cursor: not-allowed;
  color: #999;
  background-color: #f3f3f3;
}
.rc-collapse-content {
  overflow: hidden;
  color: #666;
  padding: 0 16px;
  background-color: #fff;
}
.rc-collapse-content > .rc-collapse-content-box {
  margin-top: 16px;
  margin-bottom: 16px;
}
.rc-collapse-content-inactive {
  display: none;
}
.rc-collapse-item:last-child > .rc-collapse-content {
  border-radius: 0 0 3px 3px;
}
.rc-collapse > .rc-collapse-item-active > .rc-collapse-header .arrow {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #666;
  margin-right: 6px;
}