@import './../functions', './../mixins', './../variables';

$default: (
  'font-size': 16,
  'font-size_md': 18,
  'line-height': 24,
  'line-height_md': 28,
  'margin-bottom': 20,
); // The default size is the 'large paragraph' in Figma
$small: (
  'font-size': 12,
  'font-size_md': 14,
  'letter-spacing': 0.16,
  'line-height': 16,
  'margin-bottom': 16,
);
$medium: (
  'font-size': 14,
  'font-size_md': 16,
  'line-height': 20,
  'line-height_md': 24,
  'margin-bottom': 18,
);
$sup: (
  'font-size': 10,
);
$standard-text-elements: p, li, dt, dd, summary;
$special-text-elements: h1, h2, h3, h4, h5, h6, a, small, span, label, legend;

@layer base {
  p,
  li,
  small {
    color: get-map($theme, 'text');
    font-weight: 500;

    .error &,
    &.error {
      color: get-map($theme, 'text_error');
    }
  }

  #{$standard-text-elements} {
    font-size: px-to-rem(get-map($default, 'font-size'));
    line-height: px-to-rem(get-map($default, 'line-height'));

    // These have been split out to allow us to overwrite with a direct class on the element.
    .text-small & {
      font-size: px-to-rem(get-map($small, 'font-size'));
      line-height: px-to-rem(get-map($small, 'line-height'));
      letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
    }

    .text-medium & {
      font-size: px-to-rem(get-map($medium, 'font-size'));
      line-height: px-to-rem(get-map($medium, 'line-height'));
    }

    &.text-small {
      font-size: px-to-rem(get-map($small, 'font-size'));
      line-height: px-to-rem(get-map($small, 'line-height'));
      letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
    }

    &.text-medium {
      font-size: px-to-rem(get-map($medium, 'font-size'));
      line-height: px-to-rem(get-map($medium, 'line-height'));
    }
  }

  p {
    margin-bottom: px-to-rem(get-map($default, 'margin-bottom'));

    // These have been split out to allow us to overwrite with a direct class on the element.
    .text-small & {
      margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
    }

    .text-medium & {
      margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
    }

    &.text-small {
      margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
    }

    &.text-medium {
      margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
    }
  }

  small {
    font-size: px-to-rem(get-map($small, 'font-size'));
    line-height: px-to-rem(get-map($small, 'line-height'));

    @include breakpoint('min-width', 'md') {
      font-size: px-to-rem(get-map($small, 'font-size_md'));
    }
  }

  strong {
    font-weight: 900;
  }

  em,
  i {
    font-style: italic;
  }

  sup,
  sub {
    font-size: px-to-rem(get-map($sup, 'font-size'));
    line-height: normal;
  }

  sup {
    vertical-align: super;
  }

  sub {
    vertical-align: sub;
  }

  address {
    font-style: normal;
  }

  #{$special-text-elements} {
    &.text-small {
      font-size: px-to-rem(get-map($small, 'font-size'));
      line-height: px-to-rem(get-map($small, 'line-height'));
    }

    &.text-medium {
      font-size: px-to-rem(get-map($medium, 'font-size'));
      line-height: px-to-rem(get-map($medium, 'line-height'));
    }
  }

  @include breakpoint('min-width', 'md') {
    #{$standard-text-elements} {
      font-size: px-to-rem(get-map($default, 'font-size_md'));
      line-height: px-to-rem(get-map($default, 'line-height_md'));

      // These have been split out to allow us to overwrite with a direct class on the element.
      .text-small & {
        font-size: px-to-rem(get-map($small, 'font-size_md'));
      }

      .text-medium & {
        font-size: px-to-rem(get-map($medium, 'font-size_md'));
        line-height: px-to-rem(get-map($medium, 'line-height_md'));
      }

      &.text-small {
        font-size: px-to-rem(get-map($small, 'font-size_md'));
      }

      &.text-medium {
        font-size: px-to-rem(get-map($medium, 'font-size_md'));
        line-height: px-to-rem(get-map($medium, 'line-height_md'));
      }
    }

    #{$special-text-elements} {
      &.text-small {
        font-size: px-to-rem(get-map($small, 'font-size_md'));
      }

      &.text-medium {
        font-size: px-to-rem(get-map($medium, 'font-size_md'));
        line-height: px-to-rem(get-map($medium, 'line-height_md'));
      }
    }
  }
}
