ul,
ol {
  padding-left: var(--spacing-4);
  margin-top: 1em;
  margin-bottom: 1em;

  li {
    margin-bottom: 0.5em;
  }
}

ul.list {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    list-style-type: none;
    display: block;
    margin-bottom: 0;

    &.list-header {
      overflow: hidden;
      background-color: transparent;
      font-weight: bold;
      padding: var(--spacing-1) var(--spacing-2);
      margin-bottom: var(--spacing-2);

      .list-secondary {
        color: var(--color-text);
      }
    }

    &.even {
      background-color: $table-row-even-background-color;
    }

    &.odd {
      background-color: $table-row-odd-background-color;
    }
  }

  .list-primary,
  .list-secondary {
    display: inline-flex;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .list-primary {
    float: left;
    max-width: 65%;
  }

  .list-secondary,
  .right {
    float: right;
    text-align: left;
    width: 30%;
    color: var(--color-grey_dark);
  }
}