_patterns_accordion.scss

@import 'settings';

@mixin vf-p-accordion {
  $icon-size: map-get($icon-sizes, default);

  .p-accordion__list {
    list-style-type: none;
    margin: 0 0 $spv-outer--scaleable 0;
    padding: 0;
  }

  .p-accordion__group {
    & + & {
      @extend %vf-pseudo-border--top;
    }
  }

  .p-accordion__tab,
  .p-accordion__tab--with-title {
    @extend %single-border-text-vpadding--scaling;
    @include vf-focus;

    background-color: inherit;
    border: 0;
    border-radius: 0;
    justify-content: flex-start;
    margin-bottom: 0;
    padding-left: $sph-inner + $icon-size + $sph-inner;
    padding-right: $sph-inner;
    text-align: left;
    transition-duration: 0s;
    width: 100%;
    z-index: 2;
  }

  .p-accordion__tab {
    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
    // and offset to align it with baseline of accordion tab text element
    $icon-top-position: calc(#{$table-cell-vertical-padding} - 1px + 0.25rem);

    background: {
      position: top $icon-top-position left $sph-inner;
      repeat: no-repeat;
    }

    // aria-selected controls the open and closed state for the accordion tab
    &[aria-expanded='true'] {
      @include vf-icon-minus($color-mid-dark);

      background-size: $icon-size;
    }

    &[aria-expanded='false'] {
      @include vf-icon-plus($color-mid-dark);

      background-size: $icon-size;
    }
  }

  .p-accordion__title {
    margin-bottom: 0;
    padding-top: 0;
    position: relative;
    text-indent: -$sph-inner - $icon-size;

    &::before {
      background-size: $icon-size;
      content: '';
      display: inline-block;
      height: $icon-size;
      margin-right: $sph-inner;
      width: $icon-size;
    }
  }

  // stylelint-disable selector-no-qualifying-type
  h2.p-accordion__title::before {
    // make icon bigger for h2 (same as p-icon)
    $icon-size-h2: $x-height;

    background-size: $icon-size-h2;
    height: $icon-size-h2;
    width: $icon-size-h2;
  }

  h5.p-accordion__title::before,
  h6.p-accordion__title::before {
    // align icon within font metrics same as p-icon pattern
    $vertical-offset: 0.5px;

    vertical-align: calc(#{$vertical-offset} + #{0.5 * $cap-height} - #{0.5 * $icon-size});
  }
  // stylelint-enable selector-no-qualifying-type

  .p-accordion__tab--with-title[aria-expanded='true'] .p-accordion__title::before {
    @include vf-icon-minus($color-mid-dark);
  }

  .p-accordion__tab--with-title[aria-expanded='false'] .p-accordion__title::before {
    @include vf-icon-plus($color-mid-dark);
  }

  .p-accordion__panel {
    margin: 0;
    overflow: auto; // include child margins into its height
    padding-left: $sph-inner + $icon-size + $sph-inner * 2;

    // Hides panel content
    &[aria-hidden='true'] {
      display: none;
    }
  }
}