/* https://github.com/scottaohara/a11y_accordions */

.accordion {
  border-bottom: 2px solid var(--color-neutral-gray-17);
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    margin: 0;

  /* Add zero-width space. needed to ensure Safari + VO respect list semantics.
   Set the before content to position absolute to negate any visible space
   the before content could add to the document.*/
    &::before {
      content: '\200B';
      position: absolute;
    }
  }

  ol li {
    color: var(--color-list-text);
    font-weight: 700;

    a {
      color: var(--color-neutral-gray-70);
    }
  }

  /*Gorkem asked to remove this styling on this todo:
   https://basecamp.com/1811372/projects/16960701/todos/415379506#comment_757458842
   ul:not([class]) li a {
     color: $color-neutral-gray-70;
     font-weight: 700;

     &:hover,
     &:focus {
       color: $color-links;
     }
   }

   I needed to hid these for a client request
   Why are we using !important here?
   ul li a {
     color: $color-neutral-gray-70!important;
     font-weight: 700!important;
   }*/
}

* + .accordion {
  margin-top: 3rem;
}

.accordion + * {
  margin-top: 3rem;
}

 /**
 Accordion Heading
  */
.accordion__heading {
  border-bottom: 0;
  border-top: 2px solid var(--color-neutral-gray-17);
  font-size: inherit;
  margin: 0;
  padding: 0;
}

.accordion__trigger {
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-body-text);
  cursor: pointer;
  display: block;
  font-size: var(--font-size-med-2);
  margin: 0;
  padding: 1rem 3rem 1rem 2rem;
  position: relative;
  text-align: left;
  width: 100%;
  z-index: 2;

  @media screen and (min-width: 47em) {
    font-size: var(--font-size-med-3);
  }

  &::after {
    background-repeat: no-repeat;
    background-size: 100% auto;
    bottom: 0;
    content: '';
    height: 24px;
    margin: auto;
    position: absolute;
    right: 1em;
    top: 0;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform .2s ease-in-out;
    width: 24px;
  }

  &[aria-expanded="true"]::after {
    transform: rotate(90deg);
    /* border-top-color: #fff; */
  }

  &:hover,
  &:focus {
    background-color: var(--color-neutral-gray-04);
    outline: none;
  }

  /* &:focus {
     box-shadow: inset 0 0 0 2px $color-brand-blue;
   }*/

  &[aria-expanded="true"] {
    background-color: var(--color-neutral-gray-04-2);
    color: var(--color-title-expanded);

    &::after {
      transform: rotate(180deg);
    }
  }

  &[aria-disabled="true"]:hover {
    background-color: #1b75bc;
    color: #fff;
    cursor: not-allowed;

    &:focus {
      background-color: #0a2a42;
    }
  }

 /*  This is needed to allow a double tap iOS 11
   Safari + VO to function correctly, if there
   are multiple elements (wrapper spans) to layout
   text nodes within the accordion button.

    -- This is not needed if a button only contains text
       and no other child nodes wrapping the text --

   .accordion__trigger > * {
    pointer-events: none;
   }*/
}

.accordion__panel {
  background-color: var(--color-neutral-gray-04-2);
  max-height: 0;
  overflow: hidden;
  padding: .001rem 2.25rem;
  position: relative;
  visibility: hidden;
  z-index: 1;

  &[aria-hidden="false"] {
    max-height: none;
    overflow: auto;
    padding: 0 2.25rem 2.25rem;
    visibility: visible;
  }

  > :last-child {
    margin-bottom: 0;
  }
}

.accordion__panel--transition {
  transition: max-height .15s ease-in-out, padding-top .15s ease-in-out, padding-bottom .15s ease-in-out;
}