// ---- Definition Lists -------------------------------------------------------
//
// adapted from: /components/detail/talk-page
// see lib/styles/tools/text

dl:not([class]),
dl {
  @extend %definition-list;

  > * + * {
    margin-top: $spacer-xs;
  }
}

.simple-definition-list {
  @extend %definition-list-simple;
}

%definition-list {
  dt {
    @extend %heading-font-bold;

    font-size: $font-size-base;
    line-height: $paragraph-line-height;
    color: $definition-list-dt-color;
  }

  dd {
    @extend %body-font-regular;

    margin-left: $spacer-md;
    font-size: $font-size-base;
    line-height: $paragraph-line-height;
  }
}

%definition-list-simple {
  dd {
    @extend %heading-font-regular;

    text-transform: uppercase;
  }

  dd,
  dt {
    margin-left: 0;
  }
}

@import './checked-list';
@import './definition-list';
@import './ordered-list';
@import './tuple-list';
@import './unordered-list';

// ---- Ordered Lists ----------------------------------------------------------
//
// Generated numbers from default ordered lists can't be styled directly
// yet. Therefore we disable auto-numbering and use a counter to increment
// a number and insert it via :before content.
//
// Scope element based selector to elements, that do not carry a
// class attribute, to prevent reverting styles for all non-default lists.
//

ol:not([class]) {
  @extend %base-list-styling;
  @extend %body-font-regular;
  @extend %list-unstyled;

  counter-reset: number;

  > * + * {
    margin-top: $spacer-xxs;
  }

  > li {
    counter-increment: number;

    &::before {
      @extend %heading-font-bold;

      content: counter(number);

      padding-right: $spacer-xxs;

      font-size: $font-size-base;
      line-height: $paragraph-line-height;
      color: $bullet-list-color-secondary;

      @media screen and (min-width: $grid-breakpoint-md) {
        font-size: $font-size-sm;
      }
    }

    ul {
      margin-left: $spacer-base;
    }

    ol {
      margin-left: $spacer-md;
    }
  }
}

$tuple-list-label-width: 8rem;

.tuple-list {
  @extend %list-unstyled;

  > * + * {
    margin-top: $spacer-sm;
  }
}

.tuple-list__label {
  @extend %heading-font-bold;

  display: block;
  font-size: $font-size-xs;
  color: $tupel-list-label-color;
  text-transform: uppercase;
}

.tuple-list__value {
  @extend %heading-font-regular;

  display: block;
  font-size: $font-size-xs;
  line-height: $paragraph-line-height;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .tuple-list {
    > * + * {
      margin-top: $spacer-xxs;
    }
  }

  .tuple-list__entry {
    display: grid;
    grid-template-areas: 'label value';
    grid-template-columns: $tuple-list-label-width auto;
    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
    grid-template-rows: auto;
  }

  .tuple-list__label {
    grid-area: label;
  }

  .tuple-list__value {
    grid-area: value;
  }
}

.list-unstyled {
  @extend %list-unstyled;
}

// ---- Unordered Lists --------------------------------------------------------
//
// Scope element based selector to elements, that do not carry a
// class attribute, to prevent reverting styles for all non-default lists.
//

ul:not([class], [role='list']),
.bold-list {
  @extend %base-list-styling;

  margin-left: $spacer-xs;

  > * + * {
    margin-top: $spacer-xxs;
  }

  > li {
    @extend %body-font-regular;

    padding-left: $spacer-xxs;
    list-style-type: '●';

    &::marker {
      font-size: $font-size-sm;
      color: $bullet-list-color;
    }

    li::marker {
      font-size: $font-size-sm;
      color: $bullet-list-color-secondary;
    }

    ul {
      margin-left: $spacer-sm;
    }

    ol {
      margin-left: $spacer-xxs;
    }
  }
}

// ---- Bold Bullet Lists ----------------------------------------------------------
//
.bold-list {
  @extend %base-list-styling;

  > li {
    @extend %heading-font-bold;

    list-style-type: '•';

    &::marker {
      font-size: $font-size-lg;
      color: $bullet-list-color;
    }
  }
}

.bulletfree-list {
  @extend %base-list-styling;

  color: $brand-secondary;
  list-style-type: none;

  &--inverted {
    color: $brand-primary;
  }

  &--center {
    align-self: center;
  }

  > li {
    margin-top: $spacer-xs;
  }
}