/*
 * Typography
 *
 */

@use 'sass:meta';
@use '../../../style/elements/ui-spacing.scss';
@use './typography-mixins.scss';

@include typography-mixins.typographySelectors() {
  --typography-h-default-font-weight: var(--font-weight-medium);

  // Heading xx-large
  --typography-h-xx-large-font-size: var(--font-size-xx-large);
  --typography-h-xx-large-line-height: var(--line-height-xx-large);
  --typography-h-xx-large-small-font-size: var(--font-size-x-large);
  --typography-h-xx-large-small-line-height: var(--line-height-x-large);
  --typography-h-xx-large-weight: var(--font-weight-medium);

  // Heading x-large
  --typography-h-x-large-font-size: var(--font-size-x-large);
  --typography-h-x-large-line-height: var(--line-height-x-large);
  --typography-h-x-large-small-font-size: var(--font-size-large);
  --typography-h-x-large-small-line-height: var(--line-height-large);
  --typography-h-x-large-weight: var(--font-weight-medium);

  // Heading large
  --typography-h-large-font-size: var(--font-size-large);
  --typography-h-large-line-height: var(--line-height-large);
  --typography-h-large-small-font-size: var(--font-size-medium);
  --typography-h-large-small-line-height: var(--line-height-medium);
  --typography-h-large-weight: var(--font-weight-medium);

  // Lead
  --typography-lead-font-size: var(--font-size-lead);
  --typography-lead-line-height: var(--line-height-lead);
  --typography-lead-small-font-size: var(--font-size-lead);
  --typography-lead-small-line-height: var(--line-height-lead);
  --typography-lead-weight: var(--font-weight-medium);

  // Heading medium
  --typography-h-medium-font-size: var(--font-size-medium);
  --typography-h-medium-line-height: var(--line-height-medium);
  --typography-h-medium-small-font-size: var(--font-size-basis);
  --typography-h-medium-small-line-height: var(--line-height-basis);
  --typography-h-medium-weight: var(--font-weight-medium);

  // Heading basis
  --typography-h-basis-font-size: var(--font-size-basis);
  --typography-h-basis-line-height: var(--line-height-basis);
  --typography-h-basis-small-font-size: var(--font-size-small);
  --typography-h-basis-small-line-height: var(--line-height-small);
  --typography-h-basis-weight: var(--font-weight-medium);
  --typography-h-basis-font-family: var(--font-family-default);

  // Heading small
  --typography-h-small-font-size: var(--font-size-small);
  --typography-h-small-line-height: var(--line-height-small);
  --typography-h-small-small-font-size: var(--font-size-x-small);
  --typography-h-small-small-line-height: var(--line-height-x-small);
  --typography-h-small-weight: var(--font-weight-medium);
  --typography-h-small-font-family: var(--font-family-default);

  // Heading x-small
  --typography-h-x-small-font-size: var(--font-size-x-small);
  --typography-h-x-small-line-height: var(--line-height-x-small);
  --typography-h-x-small-weight: var(--font-weight-medium);
  --typography-h-x-small-font-family: var(--font-family-default);
}

@include typography-mixins.headingClasses() {
  @include typography-mixins.headingDefaults();
}

.dnb-small {
  font-size: var(--font-size-small);
}

// // Small: do not set this for h1, like ".dnb-h--xx-large > .dnb-small"
// .dnb-p > small,
// .dnb-p > .dnb-small {
//   line-height: var(--line-height-xx-small--em); // for vertical alignment, we have to have no line-height
// }

// superscript and subscript typography
sup,
sub {
  font-size: 0.777777em; // ensure we get 14px (x-small) when parent font-size is 18px (default size)
  line-height: 0.5em; // ensure the parent line-height is still the same
}

// Paragraphs
.dnb-p {
  @include typography-mixins.paragraphDefaults();
}

@include meta.load-css('dnb-t');

// Tables
.dnb-table {
  b,
  strong {
    font-weight: var(--font-weight-medium);
  }
}

.dnb-h--xx-large {
  @include typography-mixins.headingSizeXxLarge();
}

.dnb-h--x-large {
  @include typography-mixins.headingSizeXLarge();
}

.dnb-h--large {
  @include typography-mixins.headingSizeLarge();
}

.dnb-lead {
  @include typography-mixins.typographyLead();
}

.dnb-h--medium {
  @include typography-mixins.headingSizeMedium();
}

// The rest of the Headings are not defined by the Eufemia Typography
.dnb-h--basis {
  @include typography-mixins.headingSizeBasis();
}

.dnb-h--small {
  @include typography-mixins.headingSizeSmall();
}

.dnb-h--x-small {
  @include typography-mixins.headingSizeXSmall();
}

// Spacing
.dnb-spacing {
  .dnb-h--xx-large,
  .dnb-core-style & .dnb-h--xx-large {
    @include typography-mixins.headingSpacingXxLarge();
  }

  .dnb-h--x-large,
  .dnb-core-style & .dnb-h--x-large {
    @include typography-mixins.headingSpacingXLarge();
  }

  .dnb-h--large,
  .dnb-core-style & .dnb-h--large {
    @include typography-mixins.headingSpacingLarge();
  }

  .dnb-lead,
  .dnb-h--medium,
  .dnb-h--basis,
  .dnb-h--small,
  .dnb-h--x-small,
  .dnb-core-style & .dnb-lead,
  .dnb-core-style & .dnb-h--medium,
  .dnb-core-style & .dnb-h--basis,
  .dnb-core-style & .dnb-h--small,
  .dnb-core-style & .dnb-h--x-small {
    @include typography-mixins.headingSpacing();
  }

  .dnb-p,
  .dnb-core-style & .dnb-p {
    @include ui-spacing.defaultSpacing();
  }
}