.mce-content-body,
.wysiwyg {
  @apply font-sans leading-[1.4];

  a:not(.button):not(.quiet) {
    @apply text-dark [.bg-dark_&]:text-primary hover:text-primary underline underline-offset-5;
  }

  small {
    @apply text-sm;
  }

  ol {
    @apply list-none pl-0 my-5 first:mt-0 last:mb-0;
    counter-reset: ol;

    li {
      @apply relative;

      &::before {
        @apply absolute left-0 text-dark pr-2;
      }
      .text-dark &::before {
        @apply text-primary;
      }
    }

    > li {
      @apply pl-5;
      counter-increment: ol;

      &::before {
        content: counter(ol) '.';
      }
    }

    ol {
      counter-reset: ol2;

      > li {
        @apply pl-8;
        counter-increment: ol2;

        &::before {
          content: counter(ol) '.' counter(ol2) '.';
        }
      }

      ol {
        counter-reset: ol3;

        > li {
          @apply pl-10;
          counter-increment: ol3;

          &::before {
            content: counter(ol) '.' counter(ol2) '.' counter(ol3) '.';
          }
        }
      }
    }
  }

  ul {
    @apply list-none pl-0 my-5 first:mt-0 last:mb-0;
    li {
      @apply relative pl-[1em] mb-1;

      &::before {
        @apply content-["•"] text-primary mr-1 absolute left-0;
      }
    }
  }

  .bg-dark &,
  &.bg-dark,
  &.bg-dark\/90 {
    ul > li::before,
    ol > li::before {
      @apply text-[#7cccae];
    }
  }

  /*
  .menu-item {
    @apply pl-0 before:hidden mr-2;
  }
  */

  blockquote {
    @apply border-l border-light/10 [.text-dark_&]:border-primary/20 pl-5 md:pl-8;
  }

  table {
    @apply w-full border-collapse text-sm overflow-scroll align-top;

    td,
    th {
      @apply text-left p-5 align-top;
    }

    thead th {
      @apply my-2.5 font-sans text-[clamp(18px,1.45vw,21px)] font-semibold leading-[120%] pt-12 first:mt-0 last:mb-0 [.bg-dark>&]:text-white text-dark;
    }

    thead tr td:first-child {
      @apply bg-primary/5;
    }

    tbody th {
      @apply bg-primary/5 border-b border-light font-sans uppercase text-sm tracking-widest font-normal text-right text-dark w-1/4;
    }

    tbody td {
      @apply p-5 border-b border-light;
    }

    tbody tr:last-child td,
    tbody tr:last-child th {
      @apply border-b-0;
    }

    > thead tr:first-child td,
    > thead tr:first-child th {
      @apply font-bold text-[clamp(16px,1.5vw,18px)] leading-[1.2] pb-2.5;
    }

    /* > tr:nth-child(even) td,
    > tr:nth-child(even) th,
    > tbody tr:nth-child(even) td,
    > tbody tr:nth-child(even) th {
      @apply [.bg-light_&]:bg-primary/20 [.bg-light_&]:bg-white bg-light;
    } */
  }

  hr {
    @apply border-light/10 [.text-dark_&]:border-primary/20 my-10;
  }

  & > p:not(:empty),
  & > ul:not(:empty),
  & > ol:not(:empty),
  & > blockquote:not(:empty),
  & > table,
  & > img,
  & > figure {
    @apply my-5 first:mt-0 last:mb-0;
  }

  .aligncenter {
    @apply mx-auto;
  }

  .alignleft,
  .alignright {
    max-width: 50%;
  }

  .alignleft {
    @apply float-left mr-5;
  }

  .alignright {
    @apply float-right ml-5;
  }

  img,
  figure {
    @apply max-w-full rounded;
  }

  figcaption {
    @apply text-right italic text-sm mt-2;
  }

  h2 {
    @apply relative mb-5 text-[clamp(20px,2vw,24px)] font-bold leading-[1.2] last:mb-0 text-primary;
  }

  h3 {
    @apply my-2.5 text-[clamp(16px,1.4vw,18px)] font-bold first:mt-0 last:mb-0 [.bg-dark>&]:text-white;
  }

  h4 {
    @apply font-bold leading-[1.2] text-dark my-5 first:mt-0 last:mb-0;
  }
}