@charset "UTF-8";

//
// Accordion
//
// Expand and collapse sections.
//
// Experimental: Features and functionality are new and could change
//
// Markup: templates/components/accordion/accordion.twig
//
// Style guide: Simple.Accordion
//

.su-accordion {
  @include font-smoothing;
}

.su-accordion,
.su-accordion__list,
.su-accordion__item,
.su-accordion__title,
.su-accordion__content {
  clear: both;
  position: relative;
}

.su-accordion__collapse-all,
.su-accordion__expand-all {
  float: right;
}

.su-accordion__collapse-all {
  @include responsive-spacing('margin', null null 2);
  @include margin(null null null 1.2em);
}

.su-accordion__list {
  @include list-unstyled;
  border-top: 1px solid $su-color-black-20;
}

.su-accordion__item {
  border-bottom: 1px solid $su-color-black-20;
}

.su-accordion__title {
  @include modular-typography(1);
  @include margin(0);
  width: 100%;

  > .su-accordion__button {
    all: inherit;
    @include responsive-spacing('padding', 0);
    @include fancy-hover($su-color-black, $su-color-black, 'left', 6px);
    font-weight: $su-font-bold;
    position: relative;
    cursor: pointer;

    &::after {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0.5em;
      font-weight: $su-font-regular;
      font-size: 3.6rem;
      line-height: 3.6rem;
      color: $su-color-digital-red;
      text-align: center;
    }

    &[aria-expanded="false"] {
      &::after {
        content: "+";
      }
    }

    &[aria-expanded="true"] {
      &::after {
        content: "\2212";
      }
    }

    &:focus,
    &:hover {
      text-decoration: underline;
    }
  }
}

.su-accordion__content {
  @include responsive-spacing('padding', 0 0 null);
  height: auto;

  &[aria-hidden="true"] {
    @include padding(0);
    height: 0;
    overflow: hidden;
  }
}

.su-accordion__cta {
  @include responsive-spacing('margin', 3 null null);
  @include margin(null auto);
  display: block;
  width: fit-content;
}
