// ---
// title: Disclose
// description: Similar to an accordion but any number of items can be opened closed independently.
// ---

// <div class="example html">
//    <div class="lego-disclose__item" v-disclose>
//      <a href="#" class="lego-disclose__link">
//        <span class="lego-disclose__symbol"></span>
//        Title of Disclosure
//      </a>
//      <div class="lego-disclose__content">
//        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt reiciendis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.
//      </div>
//    </div>
//    <div class="lego-disclose__item" v-disclose>
//      <a href="#" class="lego-disclose__link link--dark">
//        <span class="lego-disclose__symbol"></span>
//        Title of Disclosure with Dark Link Text
//      </a>
//      <div class="lego-disclose__content">
//        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt reiciendis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.
//      </div>
//    </div>
// </div>

// [---]

.#{$namespace}disclose {
  @extend %kill-last-child-margin;

  &__link {
    display: block;
  }

  &__symbol {
    @include transition(transform map-fetch($transition-duration, base));
    width: spacer(1);
    display: inline-block;
    // This makes clicking the arrow icon still open the disclose object.
    pointer-events: none;

    &::before {
      line-height: 1;
      font-size: map-fetch($font, size micro);
      content: '\25B6';
    }
  }

  // By default item is closed.

  &__content {
    display: none;
  }

  &__item {
    margin-bottom: spacer(1);

    &--active {

      > .#{$namespace}disclose__content {
        display: block;
      }

      > .#{$namespace}disclose__link > .#{$namespace}disclose__symbol {
        @include transform(rotate(90deg));
      }
    }
  }
}