.list {
  $self: &;
  padding: 0;
  margin: 0;

  li {
    position: relative;
  }

  p {
    line-height: 1.8;
  }

  &--inline {
    li {
      display: inline-block;
      padding-right: 15px;

      &:last-child {
        padding-right: 0;
      }
    }
  }

  &--bar {
    li {
      border-right: 1px solid #000;
      padding: 0px 5px;

      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        border-right: none;
      }
    }
  }

  &--dark {
    li {
      a {
        color: #000;
        &.active {
          font-weight: 400;
        }
      }
    }
  }

  &--square {
    list-style: none;

    li {
      padding-left: 15px;

      &:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 1px;
        background-color: #082962;
        position: absolute;
        top: 10px;
        left: 0;
      }
    }
  }

  &--circle {
    @extend #{$self}--square;
    li {
      padding-left: 15px;
      &:before {
        border-radius: 100%;
      }
    }
  }

  &--check {
    list-style: none;

    li {
      padding-left: 20px;
      position: relative;

      &:before,
      &:after {
        content: "";
        background-color: #231f20;
        height: 2px;
        display: block;
        position: absolute;
        left: 0;
        top: 10px;
      }
      &:before {
        width: 5px;
        top: 11px;
        transform: rotate(50deg);
      }
      &:after {
        width: 10px;
        left: 2px;
        transform: rotate(-40deg);
      }
    }
  }

  &--no-style {
    list-style-type: none;
  }

  &--red {
    li {
      &:before {
        background-color: $red;
      }
    }
  }

  &--orange {
    li {
      &:before {
        background-color: $pumpkin;
      }
    }
  }

  &--brown {
    li {
      &:before {
        background-color: #a18c5d;
      }
    }
  }

  &--gold {
    li {
      &:before {
        background-color: #bdb76b;
        border-radius: 1.5px;
      }
    }
  }

  &--black-font {
    a {
      color: #000;
      text-decoration: none;
    }
  }

  &--circled-num {
    counter-reset: item;

    li {
      counter-increment: item;
      list-style: none inside;
      overflow: hidden;
      line-height: 1.3;
      padding-left: 36px;
      margin-top: 20px;

      &::before {
        content: counter(item);
        @include absolute-position(4px, 0, 0, 0, translate(0));
        margin: 0 10px 0 0;
        padding-right: 3px;
        display: block;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 100%;
        width: 28px;
        height: 28px;
        color: #58595b;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        float: left;
        border: 1px solid #58595b;
        letter-spacing: -3px;
      }
    }
  }

  &--counter-num {
    counter-reset: item;

    > li {
      list-style: none;

      &::before {
        content: counters(item, ".") ". ";
        counter-increment: item;
      }
      > ol,
      > ul {
        list-style: none;
      }
    }
  }

  &--col {
    &-2 {
      @include text-column("", 2, "20px");
    }
    &-3 {
      @include text-column("", 3, "20px");
    }
    &-4 {
      @include text-column("", 4, "20px");
    }
    &-sm-2 {
      @include text-column("sm", 2, "20px");
    }
    &-sm-3 {
      @include text-column("sm", 3, "20px");
    }
    &-sm-4 {
      @include text-column("sm", 4, "20px");
    }
    &-md-2 {
      @include text-column("md", 2, "20px");
    }
    &-md-3 {
      @include text-column("md", 3, "20px");
    }
    &-md-4 {
      @include text-column("md", 4, "20px");
    }
    &-lg-2 {
      @include text-column("lg", 2, "20px");
    }
    &-lg-3 {
      @include text-column("lg", 3, "20px");
    }
    &-lg-4 {
      @include text-column("lg", 4, "20px");
    }
  }

  &--icons {
    padding: 0;
    list-style: none;
    margin: 0 -7px;
    img {
      width: 100%;
      height: 100%;
      max-height: 22px;
      max-width: 22px;
      opacity: 0.5;
      &.is-active {
        opacity: 1;
      }
    }
    li {
      display: inline-block;
      padding: 0 5px;
      &:not(:last-child) {
        border-right: $border;
      }
    }
  }
}
