// General typography styles.
$section-block-margin: 3.75rem;

:root {
  @extend %type--base;
  font-size: 100%;
}

// Footnotes
[id^='fnref-'],
.footnotes--backref {
  color: currentColor;
  text-decoration: none;
}

// Don't control class, essential to typography
.header-anchor {
  color: inherit;
  position: relative;
  text-decoration: none;

  &:focus::before,
  &:hover::before {
    background-color: currentColor;
    content: '';
    display: block;
    height: 0.75em;
    left: -1.5rem;
    margin-left: 0;
    mask-image: url('/images/icons/sprite.svg#link');
    mask-position: center right;
    mask-repeat: no-repeat;
    mask-size: 1.25rem;
    position: absolute;
    top: 0.25em;
    width: 1.25rem;
  }

  &:hover::after,
  &:focus::after {
    display: inline-block;
  }

  &--wrapper {
    margin-top: -3rem;
    padding-top: 5rem;
  }
}

.type {
  @extend %type--base;
  position: relative;

  @for $i from 1 through 6 {
    &--h#{$i} {
      @extend %type--h#{$i};
    }

    @if $i != 6 {
      h#{$i}:not([class^='type--var']) {
        @extend %type--h#{$i + 1};
      }
    }
  }

  &[data-contained] {
    container-type: inline-size;
    container-name: type;
  }

  &--mega {
    @extend %type--mega;
  }

  &--link {
    @extend %anchor;
  }

  &--page-nav {
    @extend %anchor;
    @extend %anchor--page-nav;
  }

  &--primary-nav {
    @extend %anchor--primary;
  }

  &--secondary-nav {
    @extend %anchor--secondary;
  }

  &--tertiary-nav {
    @extend %anchor--tertiary;
  }

  &--base {
    @extend %type--base;
  }

  &--large {
    @extend %type--large;
  }

  &--subtitle {
    @extend %type--large;
    color: var(--grey-700);
  }

  &--small {
    @extend %type--small;
  }

  &--caption {
    @extend %type--caption;
  }

  &--eyebrow {
    @extend %type--eyebrow;
  }

  &--label {
    @extend %type--label;
  }

  &--revert {
    @extend %type--revert;
  }

  &--code {
    @extend %type--code;
  }

  &--quote {
    @extend %blockquote;
  }

  // Long-form type styling
  /* stylelint-disable-next-line selector-max-compound-selectors */
  *
    + *:not(:empty):not(.header-anchor--wrapper):not(dd):not(.stat):not(td):not(
      dl div
    ):not(dl):not(figcaption + pre),
  * + astro-island > *:not(:empty) {
    margin-top: 1em;
  }

  /* stylelint-disable-next-line selector-max-compound-selectors */
  p > * + *:not(:empty) {
    margin-top: 0;
  }

  a > .icon {
    margin-top: 0;
  }

  a:not([class]) {
    @extend %anchor;

    [data-theme='dark'] & {
      color: var(--phosphor-white);
    }
  }

  :not(.shiki) > code {
    @extend %type--code;

    [data-theme='dark'] & {
      background-color: var(--phosphor-green-dark);
      color: var(--phosphor-white);
    }
  }

  dl:not(.stats) {
    margin-top: -4rem;
  }

  dl:not(.stats):first-child {
    margin-top: -5rem;
  }

  dl > div {
    margin: 0;
    padding-top: 5rem;
    margin-top: -3rem;

    &:not(:last-of-type) {
      margin-bottom: -4rem;
    }
  }

  dt:not([class]),
  &--dt {
    @extend %type--dt;
  }

  dd:not([class]),
  &--dd {
    @extend %type--dd;
  }

  ul:not([class]),
  ol:not([class]),
  &--list {
    @extend %type--list;
  }

  li,
  &--list-item {
    @extend %type--list-item;
  }

  kbd,
  &--kbd {
    @extend %type--kbd;
  }

  figcaption:not(.code-figure--caption) {
    margin-top: 0.5rem;

    // &:not([class]) {
    @extend %type--caption;
    // }
  }

  img:not(:first-child):not([class]),
  video:not(:first-child),
  pre:not(:first-child),
  table:not(:first-child) {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
  }

  figure {
    &:not(:first-child):not(.code-figure) {
      margin-top: 2.5rem;

      > :last-child:not(figcaption) {
        margin-bottom: 2.5rem;
      }

      > figcaption:not([class]) {
        margin-bottom: 1.5rem;
      }
    }

    // There's no good way to arrange the following so there's no descending specificity without scattering the declarations to the wind
    /* stylelint-disable no-descending-specificity */
    > img {
      display: block;
      margin-bottom: 0;
    }

    img:nth-of-type(1n),
    video:nth-of-type(1n),
    pre:nth-of-type(1n),
    table:nth-of-type(1n) {
      margin: 0;
    }

    img:not(:first-child):not([class]) {
      margin-bottom: 0;
    }
    /* stylelint-enable no-descending-specificity */
  }

  // Whenever there's an image or figure that's the only child of a paragraph tag, make it block and centered
  p > img:first-child:last-child,
  p > figure:first-child:last-child {
    display: block;
    margin: 0 auto;
  }

  .code-figure {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
  }

  section:not(:first-child) {
    margin-top: $section-block-margin;
  }

  blockquote {
    @extend %blockquote;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
  }

  hr {
    background-color: var(--grey-300);
    border: 0;
    height: 1px;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  .message {
    margin: 2.5rem 0;
  }
}
