@use 'sass:map';
@use '../../scss/font-mixins' as fonts;
@use '../../scss/spacers' as spacers;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/palette' as palette;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

.duolist-wrapper {
  &--border {
    padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(l);
    border: 0.062rem solid palette.$neutral500;
  }

  &--extra-padding-top {
    padding-top: spacers.getSpacer(xl);
    padding-bottom: spacers.getSpacer(xl);
  }
}

.duolist {
  display: grid;

  &__dt {
    @include fonts.definition-list-data;

    padding-right: spacers.getSpacer(l);

    &--non-formatted {
      padding-right: 0;
    }

    &--non-formatted#{&}::after {
      content: attr(data-separator);
      font-weight: 400;
    }
  }

  &__dd {
    @include fonts.definition-list-data;

    margin-inline-start: 0;
  }

  &__dt,
  &__dd {
    &--bold {
      @include fonts.definition-list-type;
    }

    &--non-formatted {
      display: inline;
    }
  }

  &--collapsed {
    dt {
      padding-bottom: spacers.getSpacer(3xs);
    }

    dd {
      padding-bottom: spacers.getSpacer(s);
    }
  }

  &--not-collapsed {
    dt,
    dd {
      padding-bottom: spacers.getSpacer(2xs);
    }
  }

  &--collapsed &__dd {
    border-top: 0 !important;
  }

  &--line#{&}--collapsed {
    dt {
      padding-top: spacers.getSpacer(3xs);
      padding-top: spacers.getSpacer(2xs);
    }

    dd {
      padding-bottom: spacers.getSpacer(2xs);
      border-bottom: 1px solid var(--color-base-border-onlight);

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &--line#{&}--not-collapsed {
    dt,
    dd {
      border-top: 1px solid var(--color-base-border-onlight);
      padding-top: spacers.getSpacer(2xs);

      &:last-of-type {
        border-bottom: 0.062rem solid var(--color-base-border-onlight);
      }
    }
  }

  &--non-formatted {
    display: unset;
  }
}