/**
 * @file
 * Accordion
 *
 * Contains styles for accordion content object.
 */

.accordion {
  button:focus,
  a:focus {
    @include focus-dark();
  }

  // Expand/collapse all wrapper
  &__all {
    padding: 0;
    margin: 0 0 1.25rem;
    text-align: left;

    button {
      position: relative;
      padding: 0 0 0 20px;
      background-color: transparent;
      border: 0;
      color: $color-green;
      font-size: 1em;
      font-weight: 700;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      text-decoration-skip-ink: none;
      transition: 0.3s ease-in-out;

      &.js-disabled {
        opacity: 0.4;
        pointer-events: none;
      }
    }
  }

  // Expand all toggle
  &__expand-all {
    margin-right: 1.2em;
    cursor: pointer;

    &:before,
    &:after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: $color-green;
      content: '';
      transition: 0.3s ease-in-out;
    }

    &:before {
      left: 6px;
      height: 15px;
      border-left: 3px solid $color-green;
    }

    &:after {
      left: 0;
      border-top: 3px solid $color-green;
      width: 15px;
    }

    @media (min-width: $break-large) {
      margin-right: 2em;
    }
  }

  // Collapse all toggle
  &__collapse-all {
    cursor: pointer;

    &:before,
    &:after{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: $color-green;
      content: '';
      transition: 0.3s ease-in-out;
    }

    &:after {
      left: 0;
      border-top: 3px solid $color-green;
      width: 15px;
      rotate: 45deg;
      transform-origin: 50% 0;
    }

    &:before {
      left: 6px;
      height: 14px;
      border-left: 3px solid $color-green;
      rotate: 45deg;
      transform-origin: 50% 0;
    }
  }

  // Accordion item
  &__item {
    margin: 0 0 1px;

    &:first-child {
      button {
        border-radius: 8px 8px 0 0;
      }
    }

    &:last-child {
      margin: 0;
      button {
          border-radius: 0 0 8px 8px;
      }
      .accordion__content {
        border-radius: 0 0 8px 8px;
      }
    }
  }

  // Item toggle
  &__toggle {
    display: block;
    position: relative;
    padding: 1rem 1rem 1.2rem 3.8rem;
    width: 100%;
    min-height: 68px;
    background: $color-green-dark;
    border-top: 3px solid $color-green-dark;
    border-right: 3px solid $color-green-dark;
    border-bottom: none;
    border-left: 3px solid $color-green-dark;
    color: $color-white;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    transition: 0.3s ease-in-out;

    &:focus {
      outline-width: 2px;
      outline-color: $color-white !important; //easier override for .accordion button selector
      outline-offset: -6px;
    }

    @media (min-width: $break-medium) {
      padding: 1.4rem 3rem 1.8rem 5.1rem;
      min-height: 5.25rem;
    }

    @media (min-width: $break-large) {
      padding: 1.4rem 3rem 1.8rem 5.2rem;
    }

    // Expanded toggle styling
    &.js-expanded {
      background-color: $color-white;
      color: $color-black;
      padding-top: .7rem;

      &:focus {
        outline-color: $color-black !important; //easier override for .accordion button selector
      }
      .accordion__icon {
        background-color: $color-green-dark;
        &:before {
          height: 0;
          border-color: $color-green-light;
        }
        &:after {
          border-color: $color-green-light;
        }
      }
    }
  }

  // Expanded toggle border override styling cont.
  &__item {
    &:first-child .accordion__toggle.js-expanded {
      border-radius: 8px 8px 0 0;
    }
    .accordion__toggle.js-expanded {
      border-radius: 0;

      @media (min-width: $break-medium) {
        padding-top: 1.77rem;
      }
    }
    &:last-child .accordion__toggle.js-expanded {
      border-radius: 0;
    }
  }

  &__icon {
    position: absolute;
    height: 1.75rem;
    width: 1.75rem;
    left: 1.1rem;
    top: 1.975rem;
    transform: translateY(-50%);
    background-color: $color-green-light;
    border-radius: 8px;
    transition: 0.3s background-color ease-in-out;

    &:hover {
      background-color: $color-white;
    }

    // Psuedo elements to make up +/-
    &:before,
    &:after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      border-color: $color-green-dark;
      content: '';
      transition: 0.3s ease-in-out;
    }

    &:before {
      height: 14px;
      border-left: 3px solid $color-green-dark;
    }

    &:after {
      border-top: 3px solid $color-green-dark;
      width: 14px;
    }

    @media (min-width: $break-medium) {
      width: 2.25rem;
      height: 2.25rem;
      top: 2.47rem;

      &:before {
        height: 14px;
      }

      &:after {
        width: 14px;
      }
    }

    @media (min-width: $break-large) {
      left: 1.19em;
      top: 2.35em;
      width: 2.375rem;
      height: 2.375rem;
    }
  }

  &__content {
    display: none;
    padding: .1em 1em 3em 4em;
    border-left: 3px solid $color-green-dark;
    border-right: 3px solid $color-green-dark;
    border-bottom: 3px solid $color-green-dark;

    .views-element-container {
      width: 100%;
    }
  }

  &__copy {
    width: 100%;

    .table--wysiwyg {
      margin: 0;
      width: 100%;

      @media (max-width: $break-medium - 1px) {
        margin: 0 1em;
        width: calc(100% + 2em);
      }
    }
  }

  &__top {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.5em;
    background: transparent;
    border: 0;
    font-weight: 700;

    &:before {
      position: absolute;
      left: 0;
      top: 50%;
      height: 7px;
      width: 7px;
      content: '';
      border-color: $color-black;
      border-style: solid;
      border-width: 3px 0 0 3px;
      transform: rotate(45deg) translateY(-50%);
    }
  }
}