Nested List

$accordionHeight: 53px;
$closedToggleWidth: 18px;
$openToggleWidth: 26px;
%accordion__border-bottom {
  border-bottom: solid 1px $ruleAndSeparatorColour;
}
/*------------------------------------*\
  Accordion Button
\*------------------------------------*/
.accordion__button {
  @include rem(
    padding,
    ($grid-typo-spacing-xxs + 7px) $grid-typo-spacing-xxs
    ($grid-typo-spacing-xxs + 4px) 0
  );
  background-color: $white;
  border-top: solid 1px $ruleAndSeparatorColour;
  display: block;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  text-align: left;
  width: 100%;
  word-break: normal;
  .show-hide--open.accordion__button:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
  }
}
dt.accordion__title {
  h2 {
    // revert all h2 styling
    @include font-size-with-line-height(
      $firstLevelNavigationLinkTextSize,
      $firstLevelNavigationLinkLineHeight
    );
    border-top: 0;
    margin: 0;
    padding: 0;
  }

  &:first-of-type {
    @include rem(margin-top, $grid-typo-spacing-m);
  }
  &:last-of-type {
    .accordion__button {
      @extend %accordion__border-bottom;
      + .accordion__content[aria-hidden='false'] {
        @include rem(margin-bottom, $verticalSpaceUnit * 2);
        border-bottom: solid 1px $ruleAndSeparatorColour;
      }
      &.show-hide--open {
        border-bottom: 0;
      }
    }
  }
}
/*------------------------------------*\
  Accordion Text
\*------------------------------------*/
.accordion__button--text {
  @extend %link__colour--general;
  display: inline-block;
  font-weight: bold;
}
/*------------------------------------*\
  Sticky behaviour
\*------------------------------------*/
.js {
  .wt-grid-section-center .accordion__title.sticky {
    @include rem(top, $headerHeightSticky + $secondaryNavStickyOffset - 4px);
    @include rem(height, $grid-typo-spacing-l + 3px);
    margin-top: 0;
    position: fixed;
    width: inherit;
    z-index: 1;

    @include respond-to($grid-breakpoint-s) {
      @include rem(top, $headerHeightSticky + $secondaryNavStickyOffset + 30px);
    }

    @media all and (max-width: $grid-breakpoint-s - 1) {
      width: calc(100% - #{2 * $grid-content-padding});
    }
    .accordion__button {
      background-color: $white;
      border-bottom: 1px solid $ruleAndSeparatorColour;
    }
    + .accordion__content {
      @include rem(
        margin-top,
        $grid-typo-spacing-xl + 11px
      ); // this is to stop it skipping when the sticky content disappears and the page moves up.
    }
    + .accordion__content * {
      z-index: 0;
    }
    + .accordion__content .wt-infographic--expanded {
      z-index: 5;
    }
  }
}
/*------------------------------------*\
  Control Hover behaviour
\*------------------------------------*/
.accordion__button:hover .accordion__button--text {
  color: $linkHoverColour;
}
/*------------------------------------*\
  Accordion Content
\*------------------------------------*/

.accordion__content {
  @include clearfix;
  @include rem(padding, 0 0 $grid-typo-spacing-m 0);
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0;
  }
  &:focus {
    outline: none;
  }
  + h2 {
    border-top: 0;
  }
}

.accordion__button .toggle__icon--accordion {
  @include rem(height, $accordionHeight);
}
/*------------------------------------*\
  Internal spacing - hopefully can be deleted
\*------------------------------------*/
.accordion__content .promo {
  @include rem(margin-top, $grid-typo-spacing-m);
  margin-bottom: 0;
}
/*------------------------------------*\
  Toggle icon customisation
\*------------------------------------*/
.accordion__button.toggle__control--accordion .toggle__icon--accordion {
  @include rem(width, $closedToggleWidth);
}
.show-hide--open.accordion__button.toggle__control--accordion
.toggle__icon--accordion {
  @include rem(width, $openToggleWidth);
}