// Icon List
//
// Lists with icons to the left. Extends the agaricons component.
// You can select any icon in `_component.agaricons.scss`
//
// Styleguide: Component.IconList

.content ul.icon-list {
  margin-left: 0;
}

.icon-list {
  list-style: none;
  padding-left: 0;
  //
  li {
    list-style: none;
  }
}

.icon-list-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  //
  li {
    position: relative;
    padding-left: 4rem;
  }
  li::before {
    float: left;
    margin-left: -4rem;
    display: block;
    font-family: Agaricons;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    font-size: 3em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 3rem;
  }
  //
  li {
    position: relative;
    padding-bottom: $gap;
  }
  li + li {
    margin-top: 0;
  }
  @include tablet {
    li:nth-child(2n+1) {
      margin-right: 4%;
    }
    li:nth-last-child(1),
    li:nth-last-child(2) {
      padding-bottom: 0;
    }
    li {
      padding-bottom: $gap * 2;
      width: 48%;
    }
  }
}


.icon-list-cols li {
  &.is-blue::before {
    color: $blue;
  }
  &.is-marine::before {
    color: $marine;
  }
  &.is-berry::before {
    color: $berry;
  }
  &.is-cinnamon::before {
    color: $cinnamon;
  }
  &.is-dark::before {
    color: $dark;
  }
  &.is-grey::before {
    color: $grey;
  }
  &.is-dandelion::before {
    color: $dandelion;
  }
}
