@import 'themes/default';

$unicode-space: '\00a0';
$middot: '\00b7';

// === LISTS === //

.List {
  li > ul,
  li > ol {
    margin-top: 0.75em;

    &:first-child {
      margin-top: 0.75em;
    }
  }
}

.List--plain {
  list-style: none;
  padding: 0;
}

.List--inline {
  li {
    display: inline-block;
    margin-bottom: 0;

    &::after {
      content: $unicode-space;
    }

    &:last-child::after {
      content: none;
    }
  }
}

.List--divided-comma {
  li {
    &::after {
      content: ',' + $unicode-space;
    }

    &:last-child::after {
      content: none;
    }
  }
}

.List--divided-custom {
  li {
    &::after {
      content: $unicode-space + $middot + $unicode-space;
      font-size: inherit;
      position: relative;
    }

    &:last-child::after {
      content: none;
    }
  }
}

.List--fancy {
  padding: 0;

  li {
    list-style: none;
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
}

ul.List--fancy {
  li {
    &:before {
      border-radius: var(--radius--circle);
      box-shadow: inset 0 0 0 1px rgba(var(--color--dscout-rgb), 0.8);
      content: '';
      display: inline-block;
      height: 0.5em;
      margin-right: 1em;
      transform: translateY(-20%);
      width: 0.5em;
    }

    ul {
      padding-left: 0;

      li:before {
        background-color: rgba(var(--color--dscout-rgb), 0.8);
        box-shadow: none;
        height: 0.375em;
        transform: translateY(-50%);
        width: 0.375em;
      }
    }
  }
}

ol.List--fancy {
  counter-reset: li;

  li {
    &:before {
      border: 1px solid rgba(var(--color--dscout-rgb), 0.5);
      border-radius: var(--radius--circle);
      color: var(--color--dscout);
      content: counter(li);
      counter-increment: li;
      display: inline-block;
      font-size: var(--font-size--xxs);
      height: 2em;
      line-height: 1.8;
      margin-right: 1em;
      text-align: center;
      text-indent: 0;
      transform: translateY(-15%);
      width: 2em;
    }

    ol {
      counter-reset: li;
      padding-left: 0;

      li:before {
        content: counter(li, upper-alpha);
        counter-increment: li;
      }
    }
  }
}