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

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

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

@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.
//

$number-space: $spacer-md;

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

  margin-bottom: $spacer-md;
  line-height: $paragraph-line-height;
  font-size: $font-size-base;
  counter-reset: number;

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

  & > li {
    position: relative;
    margin-bottom: $spacer-xs;
    padding-left: $number-space;

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

      position: absolute;
      top: -0.2rem;
      left: -0.5rem;
      width: $number-space;
      text-align: right;
      line-height: $paragraph-line-height;
      color: $bullet-list-color-secondary;
      font-size: $font-size-base;
      content: counter(number);
      counter-increment: number;

      @media screen and (min-width: $grid-breakpoint-md) {
        top: -0.23rem;
        line-height: $paragraph-line-height;
        font-size: $font-size-sm;
      }
    }
  }

  ul {
    // Nested lists need diffrent vertical spacings
    // to blend into the outer list.
    margin-top: $spacer-xs;
    line-height: $paragraph-line-height;
    font-size: $font-size-base;

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

    &,
    li > ul > li {
      margin-bottom: 0;
    }
  }
}

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

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

.tuple-list__label {
  @extend %teaser-caption;

  display: block;
  color: $tupel-list-label-color;
}

.tuple-list__entry {
  margin-bottom: $spacer-sm;
}

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

  display: block;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .tuple-list__entry {
    display: grid;
    margin-bottom: $spacer-xxs;
    grid-template-columns: $tuple-list-label-width auto;
    grid-template-rows: auto;
    grid-template-areas: "label value";
  }

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

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

$bullet-size: $spacer-xs; // ~9px
$bullet-offset: $spacer-sm; // ~16px
$list-indent: $bullet-offset + $bullet-size;

.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]),
.bold-list {
  @extend %unsorted-list;
  @extend %body-font-regular;

  & > li {
    padding-left: $list-indent;

    &::before {
      position: absolute;
      top: 0.4rem; //magic number
      left: 0;
      border-radius: 50%;
      background: $bullet-list-color-primary;
      width: $bullet-size;
      height: $bullet-size;
      content: "";

      @media screen and (min-width: $grid-breakpoint-md) {
        top: 0.5rem; //magic number
      }
    }
  }

  ul {
    // Nested lists need diffrent vertical spacings
    // to blend into the outer list.
    margin-top: $spacer-xs;

    &,
    li > ul > li {
      margin-bottom: 0;
    }

    // Change bullet appeareance in nested contexts
    li::before {
      background: $bullet-list-color-secondary;
    }
  }
}

// ---- Bold Bullet Lists ----------------------------------------------------------
//
.bold-list {
  @extend %heading-font-bold;

  & > li {
    &::before {
      top: 0.59rem; //magic number

      @media screen and (min-width: $grid-breakpoint-md) {
        top: 0.73rem; //magic number
      }
    }
  }
}