@use 'sass:math';

%type {
  &--header {
    color: var(--black);
    text-rendering: optimizeLegibility;
    text-wrap: pretty;
  }

  &--mega {
    @extend %type--header;
    @include flexFont((36px 50.4px), (56px 64.4px), (64px 73.6px));
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
  }

  &--h1 {
    @extend %type--header;
    @include flexFont((28px 39.2px), (40px 52px), (48px 62.4px));
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
  }

  &--h2 {
    @extend %type--header;
    @include flexFont((24px 33.6px), (28px 36.4px), (32px 38.4px));
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
  }

  &--h3 {
    @extend %type--header;
    @include flexFont((20px 28px), (26px 33.8px), (28px 36.4px));
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
  }

  &--h4 {
    @extend %type--header;
    @include flexFont((18px 22.4px), (20px 28px), (22px 30.8px));
    font-family: var(--font-body);
    letter-spacing: -0.01em;
  }

  &--h5 {
    @extend %type--header;
    @include flexFont((16px 22.4px), (16px 19.2px), (18px 21.6px));
    font-weight: 700;
    font-family: var(--font-body);
    letter-spacing: -0.01em;
  }

  &--h6 {
    @extend %type--header;
    @include flexFont((14px 24px), (16px 28px), (16px 28px), 500);
    font-weight: 700;
    font-family: var(--font-body);
  }

  &--base {
    @include fontSetup(16px, 24px, 400);
    color: var(--grey-900);
    font-family: var(--font-body);
    letter-spacing: -0.01em;
  }

  &--large {
    @extend %type--base;
    @include fontSetup(18px, 27px, 400);
    letter-spacing: -0.01em;
  }

  &--small {
    @extend %type--base;
    @include fontSetup(12px, 16px, 400);
    color: var(--grey-700);
  }

  &--quote {
    @include fontSetup(20px, 28px, 500);
    color: var(--grey-700);
    font-family: var(--font-body);
  }

  &--eyebrow {
    @extend %type--header;
    @include fontSetup(14px, 14px, 700);
    display: inline-block;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  &--label {
    @include fontSetup(12px, 16px, 600);
    color: var(--grey-900);
    text-rendering: optimizeLegibility;
    text-transform: uppercase;
  }

  &--revert {
    text-transform: none;
  }

  &--caption {
    --icon-offset: 0.1em;
    @include fontSetup(14px, 19.6px, 400);
    color: var(--grey-700);
    letter-spacing: -0.01em;
  }

  &--code {
    @include fontSetup(14px, 20px, 400, false);
    background-color: var(--grey-100);
    color: var(--grey-700);
    font-family: var(--font-mono);
    padding: 0.25em;
    word-break: break-word;
    border-radius: 2px;

    a & {
      color: $anchor-color--default;
    }

    a:hover &,
    a:focus & {
      color: $anchor-color--hover;
    }

    a:visited & {
      color: $anchor-color--visited;
    }
  }

  &--dt {
    @extend %type--eyebrow;
    margin-left: 1em;
  }

  &--dd {
    margin-left: 2em;
    margin-top: 0;

    + dt,
    + .type--dt {
      margin-top: 0.5em;
    }
  }

  &--lower {
    text-transform: lowercase;
  }

  &--upper {
    text-transform: uppercase;
  }

  &--kbd {
    background-color: var(--grey-100);
    border-radius: pxRem(3px);
    box-shadow: 1px 1px 1px var(--grey-700);
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8em;
    font-variant: small-caps;
    font-weight: $font-weight-bold;
    letter-spacing: pxRem(1px);
    margin: 0 0.125em;
    padding: 0 0.5em;
    text-rendering: optimizeLegibility;
    text-transform: lowercase;
    vertical-align: text-bottom;
  }

  &--list {
    margin-left: 2em;
    max-width: calc(100% - 4em);
  }

  &--list-item {
    margin-top: 0.5em;
  }
}
