// Unstyled Lists
// -------------------------
// Keeps list items block level, removing default browser padding and list-style

.unstyled-list {
  @include remove-native-list-styles();

  > li {
    @include text-wrap();
    margin-bottom: em($line-height-base) / 4;
  }
}


// Inline Lists
// -------------------------
// Turns list items into inline-block

.inline-list {
  @include remove-native-list-styles();

  margin-left: -($grid-gutter-width / 2);
  margin-bottom: em($line-height-base) / 4;

  > * {
    display: inline-block;
    padding-left: $grid-gutter-width / 2;
    padding-right: $grid-gutter-width / 2;
    margin-bottom: em($line-height-base) / 4;
  }
}


// Ruled Lists
// -------------------------
// Evenly spaces out a vertical list with a line between each list item

.ruled-list {
  @include remove-native-list-styles();
  @include make-ruled-list();
}



// Link Lists
// -------------------------
// Increases click/touch targets on a list of links

.link-list {
  @include remove-native-list-styles();

  a {
    display: block;
    padding: em($line-height-base / 2) 0;
    line-height: $line-height-tight-ratio;
  }
}


.action-list {
  @include remove-native-list-styles();
  @include make-ruled-list(0);

  padding-right: 0;

  a,
  button,
  .btn {
    display: block;
    padding: em($line-height-base / 2) em($grid-gutter-width / 2);
  }
}


// Icon lists
// Based on FontAwesome's icon list implementation
// https://github.com/FortAwesome/Font-Awesome/blob/v4.3.0/scss/_list.scss
// --------------------------------------------------

.icon-list {
  @include remove-native-list-styles();

  margin-left: $icon-list-item-width;

  > li {
    position: relative;
  }
}

.icon-list-item.icon {
  position: absolute;
  left: -$icon-list-item-width;
  width: $icon-list-item-width;
  top: $icon-list-item-top;
  text-align: center;

  .u-font-size-large & {
    top: $icon-list-item-top - .05; // HACK: Minor adjustment for rounding errors
  }
}