/**
* Theme typography.
*/

h1,
.heading-1,
%heading-1 {
  @include heading-base;
  @include heading-1;
  
  @include media-down(md) {
    @include heading-1-mobile;
  }
}

h2,
.heading-2,
%heading-2 {
  @include heading-base;
  @include heading-2;
  
  @include media-down(md) {
    @include heading-2-mobile;
  }
}

h3,
.heading-3,
%heading-3 {
  @include heading-base;
  @include heading-3;
  
  @include media-down(md) {
    @include heading-3-mobile;
  }
}

h4,
.heading-4,
%heading-4 {
  @include heading-base;
  @include heading-4;
  
  @include media-down(md) {
    @include heading-4-mobile;
  }
}

h5,
.heading-5,
%heading-5 {
  @include heading-base;
  @include heading-5;
  
  @include media-down(md) {
    @include heading-5-mobile;
  }
}

h6,
.heading-6,
%heading-6 {
  @include heading-base;
  @include heading-6;
  
  @include media-down(md) {
    @include heading-6-mobile;
  }
}


p,
.text,
%text {
  @include text-base;
  @include text;
  
  &-lg {
    @include text-base;
    @include text-lg;
  }
  
  @include media-down(md) {
    @include text-mobile;
    
    &-lg {
      @include text-lg-mobile;
    }
  }
}

.text-link,
%text-link {
  @include text-underline;
}

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

.ellipsis,
%ellipsis {
  @include ellipsis;
}

.hyphenate,
%hyphenate {
  @include hyphenate;
}


.wysiwyg,
%wysiwyg {
  > * {
    box-sizing: inherit;
    margin-block-end: 1rem;

    &:last-child {
      margin-bottom: 0 !important;
    }
  }

  ul,
  ol {
    position: relative;
    padding-left: 24px;
    padding-top: 0.2rem;
    list-style: none;
    @include text-base;
    @include text;

    li {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      margin: 0;

      &:first-child {
        padding-top: 0.25rem;
      }

      &:last-child {
        padding-bottom: 0;
      }
    } 

    li {
      &::before {
        position: absolute;
        display: flex;
        content: '';
        left: 0;
        width: 20px;
        height: 20px;
        font-size: 1rem;
        line-height: 0;
        justify-content: center;
        align-items: center;
      }
    }
  }

  ul {
    &:not(.list-check, .list-uncheck) {
      li {
        /* &::before {
          content: '•';
        } */
        @include icon-left('@/Images/icons/sub-alt.svg', 21px);
      }
    }

    &.list-check {
      li {
        @include icon-left('@/Images/icons/check.svg', 16px);
        &::before {
          margin-top: 5px
        }
      }
    }

    &.list-uncheck {
      li {
        @include icon-left('@/Images/icons/close.svg', 16px);
        &::before {
          margin-top: 5px
        }
      }
    }

    /* &.list-chevron {
      li {
        @include icon-left('@/Images/icons/chevron-right.svg', 12px);
        &::before {
          margin-top: 5px;
          margin-left: 5px;
        }
      }
    } */

    &.list-extended {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      justify-content: center;
      align-items: center;
      gap: 12px;

      li {
        display: contents;
        @include icon-left('@/Images/icons/minus.svg', 12px);
        &::before {
          position: relative;
        }

        &:first-child {
          &::before {
            display: none;
          }
        }
      }
    }
  }

  ol {
    counter-reset: li;

    li {
      counter-increment: li;

      &::before {
        content: counter(li) '.';
        font-size: 0.8rem;
        font-weight: $font-weight-bold;
        height: 30px
      }
    }

    
    &.list-style,
    &.list-check,
    &.list-uncheck {
      padding-left: $spacing-xl;

      li {
        padding: $spacing-smd 0;
        border-bottom: 1px solid $color-black20;
        margin: 0;

        &::before {
          content: counter(li);
          width: 32px;
          height: 32px;
          margin-top: -4px;
          background-color: $color-accent;
          border-radius: 100%;
          font-size: 1rem;
          font-weight: $font-weight-bold;
        }

        span.heading-5 {
          display: block;
          margin-top: 0;
        }

        span.heading-4 {
          display: block;
          margin-top: -2px;
        }
      }
    }

    &.list-check {
      li {
        &::before {
          content: '';
          @include backgrd('@/Images/icons/check.svg', 16px)
        }
      }
    }

    &.list-uncheck {
      li {
        &::before {
          content: '';
          @include backgrd('@/Images/icons/close.svg', 16px)
        }
      }
    }
  }

  a:not([class*='btn-']) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: $color-accent--hover;
    text-underline-offset: 0.2rem;

    &.underline-mono {
      text-decoration-color: $color-black;
    }
  }

  .text {
    &-center {
      text-align: center;
    }

    &-end {
      text-align: end;
    }

    &-justify {
      text-align: justify;
    }
  }

  table {
    width: 100%;
    @include text-base;
    @include text;

    tr {
      display: flex;
      padding: $spacing-md;
      gap: $spacing-xsm $spacing-lg;

      @include media-down(lg) {
        flex-direction: column;
        padding: $spacing-sm
      }

      td {
        flex: 1;
      }
    }
  }

  figure {
    position: relative;
    width: auto;
    
    &.image {
      display: table;
      width: fit-content;

      figcaption {
        display: table-caption;
        caption-side: bottom;
      }
    }

    &.media.lightbox {
      iframe {
        pointer-events: none;
      }
    }

    &.image-left {
      margin-left: 0;
      margin-right: auto;
    }

    &.image-center {
      margin-left: auto;
      margin-right: auto;
    }

    &.image-right {
      margin-left: auto;
      margin-right: 0;
    }
  }

  p > {
    .image-inline {
      float: left;
      margin: 0 10px 0 0;
    }
  }
}

b {
  font-weight: $font-weight-bold;
}