.accordion {
  .link-list__link {
    @include font-style($accordion-link-list-link-small, $accordion-link-list-link);
    color: $color-brand--one;
    cursor: pointer;
    padding-right: 50px;
  }

  .collapsible__content {
    &, p {
      @include font-style('body--m', 'body--l');
    }

    &--wrapper {
      margin-bottom: $spacing--s;
    }
  }
}

// small
.accordion--s {
  .link-list__link {
    @include font-style('body--l');
  }
}

// change colors based on background
.bg-brand--blue, .bg-brand--dark-blue, .bg-brand--turquoise, .bg-brand--red {
  .accordion {
    .link-list__link {
      color: $color-brand--four;
    }

    .collapsible__button::before,
    .collapsible__button::after {
      background: $color-brand--four;
    }
  }
}
.bg-brand--yellow .accordion{

  .link-list__link {
    color: $color-brand--two;
  }
  .collapsible__button::before,
    .collapsible__button::after {
      background: $color-brand--two;
  }
}

// viewport s - m
@include viewport--l('inversed') {
  .accordion .collapsible__button {
    &,
    &::before,
    &::after {
      width: 18px;
    }
  }
}
// viewport l
@include viewport--l {
  .accordion {

    .link-list__link {
      padding-right: 75px;
    }

    .collapsible__button {
      height: $icon-size--l;
      top: $baseline * 2.6;

      &,
      &::before,
      &::after {
        width: 26px;
      }
    }

    .collapsible__content {
      padding-right: 75px;

      &--wrapper {
        margin-bottom: $spacing--m;
      }
    }
  }
}
