/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/breakpoint" as *;
@use "../../common/hyphenation" as *;
@use "../../common/resets" as *;
@use "../../common/text-rendering" as *;

.ams-description-list {
  @include reset-dl;

  color: var(--ams-description-list-color);
  font-family: var(--ams-description-list-font-family);
  font-size: var(--ams-description-list-font-size);
  line-height: var(--ams-description-list-line-height);

  @include hyphenation;
  @include text-rendering;
}

@media (min-width: $ams-breakpoint-medium) {
  .ams-description-list,
  .ams-description-list__section {
    align-items: start;
    column-gap: var(--ams-description-list-column-gap);
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .ams-description-list--narrow,
  .ams-description-list--narrow .ams-description-list__section {
    grid-template-columns: var(--ams-description-list-narrow-grid-template-columns);
  }

  .ams-description-list--medium,
  .ams-description-list--medium .ams-description-list__section {
    grid-template-columns: var(--ams-description-list-medium-grid-template-columns);
  }

  .ams-description-list--wide,
  .ams-description-list--wide .ams-description-list__section {
    grid-template-columns: var(--ams-description-list-wide-grid-template-columns);
  }
}

.ams-description-list--inverse {
  color: var(--ams-description-list-inverse-color);
}

.ams-description-list__term {
  font-size: var(--ams-description-list-term-font-size);
  font-weight: var(--ams-description-list-term-font-weight);
  line-height: var(--ams-description-list-term-line-height);
  margin-block-end: var(--ams-description-list-term-margin-block-end);

  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
  text-wrap: var(--ams-description-list-term-text-wrap);

  @media (min-width: $ams-breakpoint-medium) {
    grid-column-start: 1;

    // Add margin for Terms that are longer than their Description(s)
    margin-block-end: var(--ams-description-list-term-vi-medium-margin-block-end);

    // Add half of the difference in computed line heights to align Terms with Descriptions.
    // - Terms use heading line heights; Descriptions use body text
    // - Not for Terms that follow a Term, or which are the last child
    &:not(& + &, :last-child) {
      padding-block-start: calc(
        (
            var(--ams-description-list-font-size) *
              var(--ams-description-list-line-height) - var(--ams-description-list-term-font-size) *
              var(--ams-description-list-term-line-height)
          ) /
          2
      );
    }
  }

  // Remove whitespace between consecutive Terms
  /* stylelint-disable-next-line plugin/use-baseline -- Suboptimal spacing in non-supporting browsers is acceptable */
  &:has(+ .ams-description-list__term) {
    margin-block-end: 0;
  }
}

.ams-description-list__description {
  @include reset-dd;

  font-weight: var(--ams-description-list-description-font-weight);
  margin-block-end: var(--ams-description-list-description-margin-block-end);
  padding-inline-start: var(--ams-description-list-description-padding-inline-start);

  @media (min-width: $ams-breakpoint-medium) {
    grid-column-start: 2;
    padding-inline-start: 0;

    // Make sure the first Description starts at the top row
    &:first-of-type {
      grid-row-start: 1;
    }
  }
}

.ams-description-list__section {
  margin-block-end: var(--ams-description-list-section-margin-block-end);

  @media (min-width: $ams-breakpoint-medium) {
    grid-column: span 2;

    > :only-of-type {
      // Vertically stretch a single Term or Description
      grid-row: 1 / 9;
    }
  }
}

// Remove trailing margins
/* stylelint-disable-next-line no-duplicate-selectors -- Natural reading order, prevents descending specificity */
.ams-description-list {
  > .ams-description-list__term:last-child,
  > .ams-description-list__description:last-child,
  > .ams-description-list__section:last-child,
  > .ams-description-list__section:last-child > .ams-description-list__term:last-child,
  > .ams-description-list__section:last-child > .ams-description-list__description:last-child {
    margin-block-end: 0;
  }
}

@media (min-width: $ams-breakpoint-medium) {
  .ams-description-list,
  .ams-description-list > .ams-description-list__section:last-child {
    > .ams-description-list__term:last-of-type {
      margin-block-end: 0;
    }
  }
}