// ---
// title: Block List
// description: Create big blocky vertical lists with dividers.
// ---

// ### Default Block List

// <div class="example html">
//   <ul class="lego-block-list">
//     <li>Foo</li>
//     <li>Bar</li>
//     <li>Baz</li>
//     <li><a href="#" class="lego-block-list__link">Foo Bar Baz</a></li>
//   </ul>
// </div>

// ### Block List with Bottom Border

// <div class="example html">
//   <ul class="lego-block-list lego-block-list--all">
//     <li>Foo</li>
//     <li>Bar</li>
//     <li>Baz</li>
//     <li><a href="#" class="lego-block-list__link">Foo Bar Baz</a></li>
//   </ul>
// </div>

// ### Block List with Boundry

// <div class="example html">
//   <ul class="lego-block-list-group">
//     <li>Foo</li>
//     <li>Bar</li>
//     <li>Baz</li>
//     <li><a href="#" class="lego-block-list__link">Foo Bar Baz</a></li>
//   </ul>
// </div>

// [---]

%#{$namespace}block-list,
.#{$namespace}block-list {
  list-style: none;
  margin-left: 0;

  > li {
    padding: spacer(0.5) spacer(1);
    border-top: 1px solid map-fetch($color, ui light);
  }

  // For links that will take up full space of list item.

  &__link {
    display: block;
    padding: spacer(0.5) spacer(1);
    margin-left: -(spacer(1));
    margin-right: -(spacer(1));

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

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

    &:first-child {
      margin-top: -(spacer(0.5));
    }

    &:last-child {
      margin-bottom: -(spacer(0.5));
    }

  }

  // Removes padding on left/right so items are not indented.

  &--flush {
    li {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &--all {
    li:last-child {
      border-bottom: 1px solid map-fetch($color, ui light);
    }
  }

  &--no-border {
    > li {
      border-top: 0;
    }
  }

}

// ### Block List Group
// Extends ruled list to create a self-contained grouping.

%#{$namespace}block-list-group,
.#{$namespace}block-list-group {
  @extend %#{$namespace}block-list;
  border: 1px solid map-fetch($color, ui base);
  border-radius: map-fetch($border-radius, base);

  > li:first-child {
    border: 0;
  }
}