@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";
@use "../../utilities/typography" as typographyUtils;

ul {
  list-style-type: disc;

  & & {
    list-style-type: circle;
  }

  & & & {
    list-style-type: square;
  }

  & & & & {
    list-style-type: disc;
  }
}

ol {
  list-style-type: decimal;

  & & {
    list-style-type: lower-alpha;
  }

  & & & {
    list-style-type: lower-roman;
  }

  & & & & {
    list-style-type: decimal;
  }
}

.tna-ul,
.tna-ol {
  margin-top: spacing.space(1);
  padding-left: spacing.space(2.5);

  &:first-child {
    margin-top: 0;
  }

  &--plain {
    padding-left: 0;

    list-style: none !important;

    > li::marker {
      content: "";
    }
  }

  > li {
    &::marker {
      @include typography.main-font-weight-medium;
    }
  }

  &--dashed {
    > li::marker {
      content: "—  ";
      @include typography.main-font-weight;
    }
  }

  &--spaced > li + li {
    margin-top: spacing.space(0.5);
  }

  & ul,
  & ol {
    padding-left: spacing.space(1.25);
  }
}

.tna-dl-chips {
  @include spacing.space-above(true);

  display: flex;
  flex-wrap: wrap;
  gap: spacing.space(0.75) spacing.space(1.5);

  @extend %chip-plain;

  > dt {
    position: absolute;

    font-size: 0;
  }

  &__item {
    @extend %chip;
  }

  a#{&}__item {
    cursor: pointer;
  }

  &:not(&--plain) {
    gap: spacing.space(0.5) spacing.space(1);
  }

  &--plain &__item {
    @extend %chip-plain;
  }

  &:not(&--plain) &__item {
    @extend %chip-accent;
  }

  &--plain a#{&}__item {
    @include colour.colour-font("link");
  }

  &--stacked {
    flex-direction: column;
  }
}

@mixin stacked-dl {
  display: block;

  &--lined {
    padding-bottom: 0;

    > dd {
      padding-top: 0;
      padding-bottom: spacing.space(0.5);

      border-top: none;
    }
  }

  &--zebra {
    > dt {
      --background: var(--background-tint);

      @include colour.colour-background("background");
    }

    > dd:nth-child(1n) {
      background: none;
    }
  }

  &:has(> dt > .fa-solid, > dt > .fa-brands):not(&--zebra) {
    > dd {
      padding-left: spacing.space(2);
    }
  }
}

.tna-dl {
  @include spacing.space-above;

  display: grid;
  grid-template-columns: auto;
  gap: spacing.space(0.5) 0;

  &--left-weighted {
    grid-template-columns: 2fr 1fr;
  }

  &--right-weighted {
    grid-template-columns: 1fr 2fr;
  }

  &--even {
    grid-template-columns: 1fr 1fr;
  }

  > dt,
  > dd {
    margin: 0;

    overflow-wrap: break-word;
  }

  > dt {
    padding-right: spacing.space(1);
    @include typography.main-font-weight-bold;
    position: relative;

    .fa-solid,
    .fa-brands {
      display: block;

      position: absolute;
      top: 0;
      left: 0;

      line-height: inherit;
      @include colour.colour-font("icon-light");
    }
  }

  &:has(> dt > .fa-solid, > dt > .fa-brands) {
    > dt {
      padding-left: spacing.space(2);
    }
  }

  > dd {
    padding-left: spacing.space(1);

    grid-column-start: 2;
  }

  &--lined {
    padding-bottom: spacing.space(0.5);
    @include colour.colour-border("keyline", 1px, solid, bottom);

    /* stylelint-disable-next-line no-descending-specificity */
    > dt,
    > dd {
      padding-top: spacing.space(0.5);
      @include colour.colour-border("keyline", 1px, solid, top);

      .fa-solid,
      .fa-brands {
        top: spacing.space(0.5);
      }
    }
  }

  &--zebra {
    gap: 0;

    /* stylelint-disable-next-line no-descending-specificity */
    > dt,
    > dd {
      padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5)
        spacing.space(1);
    }

    > dt {
      .fa-solid,
      .fa-brands {
        top: spacing.space(0.5);
        left: spacing.space(1);
      }
    }

    > dt:first-child,
    > dd:nth-of-type(2n) + dt,
    > dd:nth-of-type(2n + 1) {
      @include colour.tint;
    }

    &:has(> dt > .fa-solid, > dt > .fa-brands) {
      > dt {
        padding-left: spacing.space(3);
      }
    }
  }

  &--stacked#{&} {
    @include stacked-dl;
  }

  @include media.on-mobile {
    @include stacked-dl;
  }
}

li,
dd {
  p {
    margin-top: spacing.space(0.25);

    &:first-child {
      margin-top: 0;
    }
  }
}