// ---
// title: Accordion
// description: A vertical accordion with any number of panels.
// ---

// There are two dependencies:

// - The parent div must be `display:flex`;
// - The parent div must have height, usually accomplished with a `flex: 1`;

// The wrapping `<div class="doc-accordion-example">` here has been added for purposes of the documentation and should be removed.

// <div class="example html doc-accordion-example">
//   <ul class="accordion" v-accordion>
//     <li class="accordion__item" v-effect="accordion">
//       <a class="accordion__link" href="#">Item One</a>
//       <div class="accordion__content-wrap">
//         <div class="accordion__content">
//           <p>Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or define new audiences for targeting. Learn more.</p>
//         </div>
//       </div>
//     </li>
//     <li class="accordion__item  accordion__item--active" v-effect="accordion">
//       <a class="accordion__link" href="#">Item Two</a>
//       <div class="accordion__content-wrap">
//         <div class="accordion__content">
//           <p>Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or define new audiences for targeting. Learn more.</p>
//         </div>
//       </div>
//     </li>
//     <li class="accordion__item" v-effect="accordion">
//       <a class="accordion__link" href="#">Item Three</a>
//       <div class="accordion__content-wrap">
//         <div class="accordion__content">
//           <p>Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or define new audiences for targeting. Learn more.</p>
//         </div>
//       </div>
//     </li>
//   </ul>
// </div>

// [---]


.accordion {
  @include display(flex);
  @include flex-direction(column);

  &__link {
    @include transition-property(height);
    @include transition-duration(map-fetch($transition-duration, base));
    @include display(flex);
    @include align-items(center);
    letter-spacing: map-fetch($font, letter-spacing loose);
    font-size: map-fetch($font, size milli);
    padding: 0 spacer(2);
    background: map-fetch($color, background faint);
    line-height: 1;
    height: $accordion-link-height;
    box-shadow: inset 0 1px 0 map-fetch($color, ui base);
    font-weight: 500;
    text-transform: uppercase;

    &:hover {
      background: map-fetch($color, background light);
      color: map-fetch($color, text base);
    }

    &:focus {
      outline: none;
    }

    &::before {
      content: '+';
      margin-left: -(spacer(1));
      width: spacer(1);
      display: inline-block;
    }
  }

  &__item {
    @include display(flex);
    @include flex-direction(column);
    height: $accordion-link-height;
    overflow: hidden;

    &:first-child .accordion__link {
      box-shadow: none;
    }

    &--active {
      @include flex(1);

      .accordion__link {
        color: map-fetch($color, text base);
        cursor: default;

        &:hover {
          background: map-fetch($color, background faint);
        }

        &:before {
          opacity: 0;
        }
      }
    }

    &--empty {
      .accordion__content-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .accordion__content {
        flex: 1;
      }
    }
  }

  &__content-wrap {
    @include flex(1);
    overflow-y: auto;
  }

  &__content {
    padding: spacer(2);
  }

}