/*------------------------------------*\
    $LISTS
\*------------------------------------*/

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * Definition Lists
 */
dl {
  overflow: hidden;
  margin: 0 0 var(--space-3);
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

.o-list li {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  @include typeface(body, 4);
  @include media(">=medium") {
    @include typeface(body, 6);
  }
}

.o-list .u-icon {
  display: flex;
  margin-right: calc(var(--space-3) / 2);
}

.o-list .u-icon svg {
  width: 25px;
  height: 25px;
}

.o-list--numbered {
  counter-reset: item;
}

.o-list--numbered li {
  display: block;
}

.o-list--numbered li::before {
  content: counter(item);
  counter-increment: item;
  color: rgb(var(--color-background));
  padding: 10px 15px;
  border-radius: 3px;
  background-color: rgb(var(--color-text));
  font-weight: bold;
  margin-right: var(--space-3);
  float: left;
}

.o-list--numbered li > * {
  overflow: hidden;
}

.o-list--numbered li li {
  counter-reset: item;
}

.o-list--numbered li li::before {
  content: "\002010";
}