Accordion

/* stylelint-disable declaration-no-important */
// These styles are related to the javascript method wellcome.createCollapsible() in site.js
// This method turns a heading and it's related content into a collapisble show/hide container.
// During which it adds elements and attributes, which are styled here.

%collapsible-group {
  @include rem(margin-bottom, $verticalSpaceUnit * 2);
  border-bottom: solid 1px $ruleAndSeparatorColour;
}
// NOTE: have to use h2 element selector to allow :last-of-type, which in turn is necessary due to Drupal output restrictions.
// scss-lint:disable QualifyingElement

.collapsible-group,
.collapsible-group--small {
  h2.collapsible__title {
    @include font-size-with-line-height($h3FontSizeSmall, $h3LineHeightSmall);
    padding-top: 0; // don't apply the h2 spacing

    @include respond-to($grid-breakpoint-s) {
      @include font-size-with-line-height($h3FontSize, $h3LineHeight);
    }
  }

  h2.collapsible__title:last-of-type {
    @extend %collapsible-group;
  }

  h2.collapsible__title.active {
    border-bottom: 0;
    margin-bottom: 0;

    &.active {
      border-bottom: solid 1px $ruleAndSeparatorColour;
    }
  }

  h2.collapsible__title.active:last-of-type + .collapsible__content {
    @extend %collapsible-group;
  }

  .collapsible__content .list-unstyled li {
    margin-bottom: 0;
  }

  .promo {
    margin-bottom: 0;
  }
}

.collapsible-group--small {
  .append-small {
    h2 {
      margin: 0;
    }
  }
}
// scss-lint:enable QualifyingElement
// Collapsible headings
.enhanced {
  .wt-grid-section-center .js-collapsible__title.js-collapsible__title {
    // This class is added with javascript; double class intentional for specificity.
    margin-bottom: 0;
    position: static;

    @supports ((position: sticky) or (position: -webkit-sticky)) {
      &.active {
        position: sticky; // very modern browsers will support this
        top: $headerHeightSticky + $secondaryNavStickyOffset - 4px;

        @include respond-to($grid-breakpoint-s) {
          top: $headerHeightSticky + $secondaryNavHeight;
        }
      }
    }

    &:after {
      left: 100%;
    }

    .media &,
    li & {
      font-size: inherit;
      line-height: inherit;
    }

    &:not(:first-of-type) {
      margin-top: 0;
    }

    &.sticky {
      border-bottom: 1px solid $ruleAndSeparatorColour;
    }
  }
}

.enhanced .no-subnav .wt-grid-section-center .js-collapsible__title.active {
  @supports ((position: sticky) or (position: -webkit-sticky)) {
    top: $headerHeightSticky + $secondaryNavStickyOffset - 3px;
  }
}

h2.js-collapsible__title {
  background-color: $white;
  top: $headerHeightSticky + $secondaryNavHeight; // will need this for sticky positioning
  z-index: 2;

  &:first-of-type {
    border-top: 1px solid $ruleAndSeparatorColour;
  }
  + .collapsible__content * {
    // so that the sticky heading moves above content
    z-index: 0 !important;
  }

  + .collapsible__content .wt-infographic--expanded {
    // unless of course it's an expanded infographic
    z-index: 5 !important;
  }

  // for older browsers, we need to tell the title where to sit when it's sticky
  &.sticky {
    margin-top: 0;
    top: $headerHeightSticky + $secondaryNavHeight;
    z-index: 1;

    @media all and (max-width: $grid-breakpoint-s - 1) {
      width: calc(100% - #{2 * $grid-content-padding});
    }
  }
}
// these styles apply to the collapsible lists such as in 'Governance'
.js-open-filter,
.js-open-filter li {
  list-style-type: none;
  // the nested lists shouldn't have spacing on the left, as on mobile this makes them really narrow
  ul,
  ul ul {
    margin-left: 0;
    padding-left: 0;
  }
}
// need span to distinguish from h2 collapsibles

.js-open-filter span.js-collapsible__title.js-collapsible__title {
  background-color: transparent;
  display: inline-block;
  // this forces the title to be contained in the list
  max-width: 90%;
}

@include respond-to($genericVerticalStackPoint) {
  .col--narrow {
    .js-collapsible__title {
      font-size: 18px;
      line-height: 24px;
    }
  }
}
// This element is added inside the heading and acts as the control to show/hide the content
/*button*/
.collapsible__switch {
  @include rem(padding, 14px 0);
  background: none;
  color: $black;
  display: block;
  margin-bottom: 0;
  padding-left: $grid-content-padding;
  position: relative;
  text-align: left;
  width: 100%;
  word-break: normal;

  &:before {
    content: none;
  }

  &[type='button']:active,
  &[type='button']:focus,
  &[type='button']:hover {
    // for specificity
    background: none;
  }

  @include respond-to($grid-breakpoint-s) {
    padding-left: 0;
  }

  .js-collapsible__title--last & {
    @include rem(margin-bottom, $verticalSpaceUnit * 2);
    border-bottom: $border;
  }

  .active & {
    border-bottom: 0;
  }

  .media &,
  li & {
    border: 0;
    display: inline-block;
    font-weight: normal;
    padding: 0;
    padding-right: 32px;
    width: auto;
  }

  @media print {
    padding-left: 0;
  }

  h2.collapsible__title & {
    @include font-size-with-line-height($h3FontSizeSmall, $h3LineHeightSmall);

    @include respond-to($grid-breakpoint-s) {
      @include font-size-with-line-height($h3FontSize, $h3LineHeight);
    }
    padding-left: 0;
    padding-right: 30px;

    .collapsible__switch-text {
      display: inline-block;
      transform: translateX(0);
      transition: transform $hoverTransLength;
      will-change: transform;
    }
  }
}

.collapsible__switch:active,
.collapsible__switch:focus,
.collapsible__switch:hover {
  h2.collapsible__title & .collapsible__switch-text {
    transform: translateX($grid-content-padding * 0.5);
  }
}

.collapsible__switch--close {
  @extend %link;
  border: 0;
  float: right;
  padding: 0;
  width: auto;
}
// This element is added after span inside the bottom and is used to create the visible up/down arrow
/*i*/
.collapsible__toggle {
  @include rem(width, $grid-typo-spacing-xs);
  bottom: 0;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;

  &:before {
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    h2.collapsible__title & {
      @extend %icon--cross--black;
    }

    span.collapsible__title & {
      @extend %icon--chevron-white;
      background-size: 45%;
      transform: rotate(90deg);
    }
  }

  [aria-expanded='true'] &:before,
  [aria-expanded='true'] &:before {
    h2.collapsible__title & {
      transform: rotate(45deg);
    }

    span.collapsible__title & {
      transform: rotate(270deg);
    }
  }

  .collapsible__switch-text + & {
    margin-left: 0.25em;
  }
}
// Showing and hiding the content
[aria-hidden='true'] {
  .enhanced & {
    display: none;

    @media print {
      display: block;
    }
  }
}

.collapsible__content {
  @include clearfix;
  @include rem(padding, $grid-typo-spacing-s 0 $grid-typo-spacing-m);

  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0;
  }

  button {
    margin: 0.625rem 0 0;
  }

  .wt-infographic__expander {
    margin: 0;
  }

  .collapsible__switch {
    height: auto;
    margin-top: 0;
    min-height: auto;
  }

  &[aria-hidden='false'] {
    display: block;
  }
}

.js-collapsible__title {
  z-index: 2;
}

.js-collapsible__title.js-collapsible__title.toggle-info__trigger {
  position: static;
}

.enhanced .horizontal-slider__container {
  .toggle-info__content,
  .toggle-info__trigger {
    display: none;
  }

  .toggle-info__content[aria-hidden='false'],
  .toggle-info__trigger.js-collapsible__title {
    display: block;
  }
}

.toggle-info {
  .collapsible__switch.collapsible__switch {
    @extend %icon--definition-white;
    height: 22px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 22px;

    &:focus,
    &:hover,
    &[aria-expanded='true'] {
      @extend %icon--definition-over;
      background-repeat: no-repeat;
    }

    &:after {
      display: none !important;
    }
  }
}

.toggle-info__content {
  @include rem(margin-top, 8px);
  background-color: $alphaNestedBackgroundColour;
  clear: both;
  font-size: 0.8em;
  line-height: 1.3;
}

.generic-filter__items {
  .toggle-info__content {
    background-color: transparent;
  }
}

.collapsible__title--small-screen {
  margin-bottom: $grid-typo-spacing-s;
}