/**
* Theme typography.
*/

h1,
.heading-1,
%heading-1 {
  @include heading-1-mobile;

  @include media-up(md) {
    @include heading-1;
  }
}

h2,
.heading-2,
%heading-2 {
  @include heading-2-mobile;

  @include media-up(md) {
    @include heading-2;
  }
}

h3,
.heading-3,
%heading-3 {
  @include heading-3-mobile;

  @include media-up(md) {
    @include heading-3;
  }
}

h4,
.heading-4,
%heading-4 {
  @include heading-4-mobile;

  @include media-up(md) {
    @include heading-4;
  }
}

h5,
.heading-5,
%heading-5 {
  @include heading-5-mobile;

  @include media-up(md) {
    @include heading-5;
  }
}

h6,
.heading-6,
%heading-6 {
  @include heading-6;
}

.text,
%text {
  @include text-mobile;

  @include media-up(md) {
    @include text;
  }
}

.text-large,
%text-large {
  @include text-large-mobile;

  @include media-up(md) {
    @include text-large;
  }
}

.text-small,
%text-small {
  @include text-small;
}

.text-x-small,
%text-x-small {
  @include text-x-small;
}

.text-display,
%text-display {
  @include text-display-mobile;

  @include media-up(md) {
    @include text-display;
  }
}

.pre,
pre,
%pre {
  @include pre;
}

.screen-reader,
%screen-reader {
  @include screen-reader;
}

.ellipsis {
  @include ellipsis;
}

.hyphenate {
  @include hyphenate;
}

.wysiwyg {
  > *:empty,
  > *:-moz-only-whitespace {
    margin-bottom: 0 !important;
  }

  > *:not(h1, h2, h3, h4, h5, h6) {
    font: inherit;
    letter-spacing: inherit;
  }

  > *:not(:last-child) {
    margin-bottom: $spacing-16;

    @include media-up(md) {
      margin-bottom: $spacing-20;
    }
  }

  > * {
    // background-color: #eee8aa;
  }

  ul,
  ol {
    display: flex;
    flex-direction: column;
    row-gap: $spacing-8;

    li {
      padding-left: $spacing-28;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: $spacing-base;
        left: $spacing-12;
        display: block;
      }
    }
  }

  ul {
    li {
      &::before {
        mask-image: url('@/assets/icons/dot.svg');
        mask-origin: content-box;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: currentcolor;
        height: $spacing-16;
        width: $spacing-16;
      }
    }
  }

  ol {
    list-style: none;
    counter-reset: number;

    li {
      counter-increment: number;

      &::before {
        font: inherit;
        top: 0;
        content: counter(number) '. ';
      }
    }
  }

  a {
    @include link-inline;
  }

  figure {
    img {
      max-height: multiple(113.5);
      object-position: top center;
      object-fit: contain;
      width: auto;
      max-width: 100%;

      @include media-up(md) {
        object-position: top left;
      }
    }
  }
}