ul, ol, dl {

  &.with-bullets {
    list-style: initial;
  }
  &.with-number-circled {
    counter-reset: section;
    list-style-type: none;

    li:before {
      counter-increment: section;
      content: counter(section);
      background-color: $circle-list-bg;
      display: inline-block;
      padding-top: calc(($circle-list-size - $circle-list-size-font-size) / 2);
      text-align: center;
      height: $circle-list-size;
      width: $circle-list-size;
      font-size: $circle-list-size-font-size;
      color: $circle-list-size-color;
      border-radius: 50%;
      margin-right: $spacing-icon-x;
    }

    li.list-item-info:before {
      background-color: $info;
    }

    li.list-item-primary:before {
      background-color: $primary;
    }
    li.list-item-danger:before {
      background-color: $danger;
    }
  }

}

.list-number-circled {
  counter-reset: section;
  .list-number-item:before {
    align-items: center;
    text-align: center;
    counter-increment: section;
    content: counter(section);
    background-color: $petrol;
    display: inline-block;
    padding-top: calc($spacing-md / 4);
    font-size: $spacing-md;
    height: $spacing-md * 2 ;
    width: $spacing-md * 2;
    color: $white;
    border-radius: 50%;
    margin-right: $spacing-icon-x;
  }
}
.best_in_place {
  & > ul {
    list-style-type: disc;
  }
  & > ol {
    list-style-type: decimal;
  }
}

li.empty {
  padding: 42px 0;
  color: $gray;
  font-size: 2rem;
  margin: 0;
}

ul, ol {
  li {
    .media .icon-lg {
      margin-right: $spacing-xs;
      padding: 0;
      text-align: right;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

ul.narrow li, 
ol.narrow li {
  margin-bottom: $spacing-xs;
}

.list-inline {
  display: flex;
  flex-wrap: wrap;
}

.list-inline li {
  display: inline-block;
  margin: 0 $spacing-xs $spacing-xs 0;
  vertical-align: top;

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

  .tag {
    @include ellipsis;

    max-width: $spacing-lg * 6;
  }

  .media .icon-lg {
    width: auto;
    padding: 0;
    text-align: left;
  }

}

.list-icons li .icon {
  margin: 0;
}

.list-flex,
ul.flex {
  display: flex;
  flex-wrap: wrap;

  .media-body {
    flex: 1 1 auto;
  }
}


.spaced-item {
  margin-top: calc($spacing / 2);
  margin-bottom: calc($spacing / 2);
}

ol {
  &.step-list {
    & > li {
      position: relative;
      counter-increment: step-counter;
      padding-left: $spacing-lg;
    }

    & > li:before {
      content: counter(step-counter);
      position: absolute;
      left: 0;
      top: 0;
      width: $list-group-item-height;
      height: 100%;
      padding-top: 4px;
      text-align: center;
      font-size: $h4-font-size;
      color: $gray-light;
      border-right: $border-width solid $list-group-border-color;
    }
  }
}

.list-group-item {
  &.test_case_segment {
    margin-bottom: 0;
    padding-left: $spacing-lg + $spacing-sm;

    .title {
      &.open:before {
        content: "";
      }
    }
  }
}

.list-vertical li {
  margin-bottom: $spacing-xs;
  &:last-child {
    margin-bottom: 0;
  }
}


//////// Description List ////////

dl dd {
  margin-bottom: $spacing-xs;

  &:last-child {
    margin-bottom: 0;
  }
}

dl.list-inline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: $spacing-xs;
}

dl.list-inline dt {
  padding-right: $spacing;
}

dl.list-inline dd {
  margin-bottom: 0;
}

dl.list-inline.responsive {
  grid-template-columns: 1fr;
  dd {
    margin-bottom: $spacing-xs;
  }
  @include media-breakpoint-up(lg) {
    grid-template-columns: auto 1fr;
    dd {
      margin-bottom: 0;
    }
  }
}

dl.list-vertical {
  display: grid;
  gap: $spacing-xs;
}

//////// Bullet List ////////

ul.bullet-list {
  position: relative;
  text-align: left;
}

ul.bullet-list li {
  position: relative;
  padding-left: $spacing-md;
}

ul.bullet-list li::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: $icon-xs;
  height: $icon-xs;
  left: 0;
  top: -1px;
  mask-image: url("@images/circle-sm-filled.svg");
  mask-repeat: no-repeat;
  background-color: $black;
}