@use "../../utilities";
@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/media-query-breakpoints";
@use "../../variables/typography";
@use "../rich-content";

@use "definition-list.variables" as css-definition-list-variables;

dl {
  margin-block-end: var(--_dt-dl-margin-block-end, css-definition-list-variables.$block-space * 2);
  margin-block-start: 0;
  font-size: var(--_dt-dl-font-size, inherit);

  + dl {
    &::before {
      border-block-end: 1px solid colors.$grijs-20;
      content: " ";
      display: var(--_dt-dl-before-display, block);
      float: inline-start;
      block-size: css-definition-list-variables.$block-space;
      margin-block-end: css-definition-list-variables.$block-space * 3;
      inline-size: 100%;
    }
  }

  &.dso-inline,
  &.dso-inline-end {
    .dso-inline-group {
      display: inline-block;

      dd,
      dt {
        display: inline;

        &::before,
        &::after {
          display: inline;
        }
      }

      dt {
        &::after {
          content: ":";
        }
      }

      dd {
        margin-inline-start: calc(units.$u1 * 0.5);

        p {
          display: inline;
        }
      }
    }
  }

  &.dso-inline-end {
    text-align: end;

    .dso-inline-group + .dso-inline-group {
      margin-inline-start: units.$u2;
    }
  }

  &.dso-inline {
    .dso-inline-group {
      margin-inline-end: units.$u2;
    }
  }

  &.dso-grouped {
    > .dso-group {
      display: flex;
      flex-wrap: nowrap;
      column-gap: units.$u1;
    }

    dt,
    dd {
      /* stylelint-disable-next-line declaration-property-value-disallowed-list -- wrapping is done by child dt/dd elements */
      white-space: nowrap;
    }

    dt {
      &::after {
        content: ":";
        display: inline-block;
      }
    }
  }

  dt,
  dd {
    line-height: typography.$line-height-base;
  }

  dt {
    font-weight: var(--_dt-dl-dt-font-weight, 700);
  }

  dd {
    @include rich-content.children();
    @include utilities.clearfix();

    margin-inline-start: 0;

    &:last-of-type {
      margin-inline-end: 0;
    }

    p:last-child {
      margin-block-end: 0;
    }

    @media screen and (min-width: css-definition-list-variables.$horizontal-breakpoint) {
      &:last-of-type {
        margin-block-end: var(--_dt-dl-dd-last-margin-block-end, css-definition-list-variables.$block-space);
      }
    }
  }

  &.dso-columns {
    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {
      break-inside: avoid;
      column-gap: units.$u2;

      dd:last-of-type {
        margin-block-end: 0;
      }

      &.dso-2-columns {
        column-count: 2;

        dt {
          inline-size: calc(50% - #{units.$u1});
        }

        dd {
          margin-inline-start: calc(50% + #{units.$u1});
        }
      }

      &.dso-3-columns {
        column-count: 3;

        dt {
          inline-size: calc(50% - #{units.$u1});
        }

        dd {
          margin-inline-start: calc(50% + #{units.$u1});
        }
      }

      > div {
        &,
        dt,
        dd {
          break-inside: avoid-column;
          overflow: hidden;
        }
      }
    }

    > div {
      margin-block-end: css-definition-list-variables.$block-space;
    }
  }

  @media screen and (min-width: css-definition-list-variables.$horizontal-breakpoint) {
    &:not(.dso-vertical, .dso-inline-group):not(.dso-columns) {
      dd + dt,
      dd + dt + dd {
        margin-block-start: var(--_dt-dl-dd-margin-block-start, css-definition-list-variables.$block-space);
      }
    }
  }

  &:not(.dso-vertical, .dso-inline, .dso-inline-end) {
    @media screen and (min-width: css-definition-list-variables.$horizontal-breakpoint) {
      dt {
        clear: inline-start;
        float: inline-start;
        inline-size: var(--_dt-dl-dt-inline-size, css-definition-list-variables.$term-inline-size);
        overflow-wrap: break-word;
      }

      dd {
        margin-inline-start: var(--_dt-dl-dd-margin-inline-start, css-definition-list-variables.$term-inline-size);
        padding-inline-start: var(--_dt-dl-dd-padding-inline-start, css-definition-list-variables.$gutter);
      }

      &.dso-columns-1-3 {
        dt {
          inline-size: 25%;
        }

        dd {
          margin-inline-start: 25%;
        }
      }

      &.dso-columns-2-2 {
        dt {
          inline-size: 50%;
        }

        dd {
          margin-inline-start: 50%;
        }
      }

      &.dso-columns-3-1 {
        dt {
          inline-size: 75%;
        }

        dd {
          margin-inline-start: 75%;
        }
      }

      &.dso-columns {
        break-inside: avoid;
        column-gap: units.$u2;

        dt,
        dd {
          break-inside: avoid-column;
        }

        dd {
          padding-inline-start: 0;
        }
      }

      &.dso-2-columns {
        column-count: 2;
      }

      &.dso-3-columns {
        column-count: 3;
      }
    }
  }

  &.dso-vertical {
    dt,
    dd {
      inline-size: 100%;
    }

    dd {
      margin-inline-start: 0;
    }

    dd + dt {
      margin-block-start: css-definition-list-variables.$block-space;
    }
  }

  &.dso-emphasize-description {
    dt {
      color: colors.$grijs-60;
      font-weight: normal;
    }
  }

  &.dso-with-header {
    dt,
    dd {
      &:first-of-type {
        color: css-definition-list-variables.$highlight-color;
        font-weight: bold;
      }
    }
  }

  &:not(.dso-bordered) {
    @media screen and (max-width: #{css-definition-list-variables.$horizontal-breakpoint - 1}) {
      dd + dt {
        margin-block-start: var(--_dt-dl-dd-margin-block-start, css-definition-list-variables.$block-space);
      }
    }
  }

  &.dso-bordered {
    border-block-end: css-definition-list-variables.$list-border;

    dt::before {
      border-block-start: css-definition-list-variables.$list-border;
      content: "";
      display: block;
      padding-block-start: css-definition-list-variables.$block-space;
      inline-size: 100%;
    }

    dt,
    dd {
      &:last-of-type {
        padding-block-end: css-definition-list-variables.$block-space * 0.5;
      }
    }

    @media screen and (min-width: css-definition-list-variables.$horizontal-breakpoint) {
      dd {
        &:last-of-type {
          margin-block-end: 0;
        }
      }
    }

    @media screen and (max-width: #{css-definition-list-variables.$horizontal-breakpoint - 1}) {
      dd + dt::before {
        margin-block-start: css-definition-list-variables.$block-space;
      }

      dd:last-of-type {
        margin-block-end: css-definition-list-variables.$block-space;
      }
    }

    @media screen and (min-width: css-definition-list-variables.$horizontal-breakpoint) {
      dt + dd {
        margin-inline-start: css-definition-list-variables.$term-inline-size;
        padding-inline-start: css-definition-list-variables.$gutter;

        &::before {
          border-block-start: css-definition-list-variables.$list-border;
          content: "";
          display: block;
          margin-inline-start: css-definition-list-variables.$gutter * -1;
          margin-block-end: css-definition-list-variables.$block-space;
          inline-size: calc(100% + #{css-definition-list-variables.$gutter});
        }
      }
    }
  }
}