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

@accordionPrefixCls: am-accordion;

.@{accordionPrefixCls} {
  position: relative;
  .hairline-top(@border-color-base);
  &-anim-active {
    transition: all .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;
      .hairline-bottom(@border-color-base);
      .ellipsis();
      i {
        position: absolute;
        display: block;
        top: @h-spacing-lg;
        right: @h-spacing-lg;
        width: @icon-size-xxs;
        height: @icon-size-xxs;
        .encoded-svg-background("<svg width='16' height='27' viewBox='0 0 16 27' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-704.000000, -261.000000)' fill='#CCCCCC'><g  transform='translate(0.000000, 204.000000)'><path d='M719.533036,70.040985 L719.571414,70.0026067 L706.568807,57 L704,59.5688074 L714.472178,70.040985 L704,80.5131625 L706.568807,83.08197 L719.571414,70.0793633 L719.533036,70.040985 Z'></path></g></g></svg>");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        .transform(rotate(90deg));
      }
      &[aria-expanded~="true"] {
        i {
          .transform(rotate(270deg));
        }
      }
    }
    .@{accordionPrefixCls}-content {
      overflow: hidden;
      background: @fill-base;
      .@{accordionPrefixCls}-content-box {
        font-size: @font-size-subhead;
        color: @color-text-paragraph;
        .hairline-bottom(@border-color-base);
      }
      &.@{accordionPrefixCls}-content-inactive {
        display: none;
      }
    }
  }
}