// Partials / Accordion

.accordion{
  --paddingLeft: var(--columnPaddingSmall);
  --paddingRight: var(--columnPaddingSmall);

  --titleFontSize: var(--textFontSizeLarge);
  --titleLineHeight: var(--textLineHeightLarge);

  --textFontSize: var(--textFontSizeLarge);
  --textLineHeight: var(--textLineHeightLarge);

  --titlePadding: 20px;
  --itemTitlePadding: 20px 25px;
  --itemBodyPadding: 0 80px 20px 45px;

  --buttonBeforeTop: 9px;
  --buttonBeforeTopActive: 7px;

  width:100%;
  padding:0 var(--paddingRight) 0 var(--paddingLeft);
  font-size: var(--textFontSize);
  line-height: var(--textLineHeight);

  & > .inner{
    text-align:left;
    background-color:$white;
    box-shadow:0 4px 25px 0 rgba(0,0,0,0.03);
    border-radius:4px;
    border:1px solid lighten($accordion-border-color, 5);
  }

  & > .inner > .header{
    border-bottom:1px solid lighten($accordion-border-color, 5);
    border-radius:4px 4px 0 0;
    color:$blue-black;
    font-size:15px;
    line-height:19px;
    font-weight:500;

    .title{
      padding: var(--titlePadding);
    }
  }

  .accordion-item{
    border-bottom:1px solid $accordion-line-color;

    &:last-child{
      border-bottom:none;
    }

    .title{
      padding: var(--itemTitlePadding);
      
      &,
      button{
        @include font-sans;
        font-size: var(--titleFontSize);
        line-height: var(--titleLineHeight);
        font-weight:500;
        color:$blue;
      }

      button{
        position:relative;
        padding-left:20px;

        &.active{
          &:before{
            transform:rotate(135deg);
            top: var(--buttonBeforeTopActive);
          }
        }

        &:before{
          content:'';

          transition-duration:0.2s;
          transition-property:all;
          transform-origin:center;
          transform:rotate(45deg);

          position:absolute;
          left:0;
          top: var(--buttonBeforeTop);

          display:block;

          width:8px;
          height:8px;
          border-radius:1px;

          border-top:2px solid $blue-black;
          border-right:2px solid $blue-black;
        }
      }
    }

    .body{
      color:$blue-black;
      padding: var(--itemBodyPadding);
      margin-top:-10px;
    }
  }
}

@include breakpoint($tablet-landscape){
  .accordion{
    --paddingLeft: var(--columnPaddingNone);
    --paddingRight: var(--columnPaddingNone);

    --titleFontSize: var(--titleFontSizeXSmall);
    --titleLineHeight: var(--titleLineHeightXSmall);

    --textFontSize: var(--textFontSizeMedium);
    --textLineHeight: var(--textLineHeightMedium);

    --buttonBeforeTop: 7px;
    --buttonBeforeTopActive: 6px;
  }
}

@include breakpoint($phone){
  .accordion{
    --textFontSize: var(--textFontSizeSmall);
    --textLineHeight: var(--textLineHeightMedium);

    --buttonBeforeTop: 7px;
    --buttonBeforeTopActive: 5px;

    --titlePadding: 15px 20px 15px 15px;
    --itemTitlePadding: 15px;
    --itemBodyPadding: 15px 20px 15px 35px;
  }
}
