/****************************************

ACCORDION STYLES

Styling for Accordion

*****************************************/
.accordion {
  padding: var(--pad-24) 0px; }
  .accordion .paragraph--type--accordion-content {
    border-bottom: 1px solid var(--grey); }
    .accordion .paragraph--type--accordion-content button[aria-expanded='true'] {
      border-bottom: 1px solid var(--light-blue); }
  .accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    font-weight: var(--bold);
    padding: var(--pad-16) 0px;
    color: var(--black);
    border: none;
    background: none;
    outline: none; }
    .accordion button:hover, .accordion button:focus {
      cursor: pointer;
      color: var(--blue); }
      .accordion button:hover::after, .accordion button:focus::after {
        cursor: pointer;
        color: var(--blue);
        border: 1px solid var(--blue); }
    .accordion button .accordion-title {
      padding: 2px 41px 2px 0px;
      display: inline-block; }
    .accordion button .icon {
      display: inline-block;
      position: absolute;
      top: 20px;
      right: 0;
      width: 22px;
      height: 22px;
      border: 1px solid;
      border-radius: 22px; }
      .accordion button .icon::before {
        display: block;
        position: absolute;
        content: '';
        top: 10px;
        left: 6px;
        width: 10px;
        height: 2px;
        background: currentColor; }
      .accordion button .icon::after {
        display: block;
        position: absolute;
        content: '';
        top: 6px;
        left: 10px;
        width: 2px;
        height: 10px;
        background: currentColor; }
  .accordion button[aria-expanded='true'] {
    color: var(--blue); }
    .accordion button[aria-expanded='true'] .icon::after {
      width: 0; }
    .accordion button[aria-expanded='true'] + .accordion-content {
      opacity: 1;
      max-height: 40em;
      overflow: scroll;
      -webkit-transition: all .3s linear;
      -o-transition: all .3s linear;
      transition: all .3s linear;
      will-change: opacity, max-height; }
  .accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: opacity 200ms linear, max-height 200ms linear;
    -o-transition: opacity 200ms linear, max-height 200ms linear;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height; }
    .accordion .accordion-content p {
      padding: var(--pad-16) 0px; }