@use 'mixins/a11y';

@mixin prose {
  --tw-prose-heading-tracking: theme(letterSpacing.tight);
  --tw-prose-heading-family: theme(fontFamily.sans);
  --tw-prose-heading-weight: theme(fontWeight.black);
  --tw-prose-links-hover-color: theme(colors.gray.600);

  @apply wysiwyg wysiwyg-gray @lg/prose:wysiwyg-lg @xl/prose:wysiwyg-xl;

  max-width: var(--prose-max-w, inherit);

  :where(h2, h3, h4, h5, h6):not(:where([class~="not-wysiwyg"],[class~="not-wysiwyg"] *)) {
    @apply tracking-[var(--tw-prose-heading-tracking)];

    font-family: var(--tw-prose-heading-family-override, var(--tw-prose-heading-family));
    font-weight: var(--tw-prose-heading-weight-override, var(--tw-prose-heading-weight));
  }

  > :is(:first-child:not(.hidden)) {
    @apply mt-0;
  }

  > :is(:last-child:not(.hidden)) {
    @apply mb-0;
  }

  a:not(:where([class*="btn"],[class~="not-wysiwyg"],[class~="not-wysiwyg"] *)) {
    @apply underline decoration-auto underline-offset-2 hover:text-[var(--tw-prose-links-hover-color)] focus-visible:text-[var(--tw-prose-links-hover-color)];
  }

  figure:not(.align-left, .align-right) {
    @apply me-0 ms-0;
  }

  blockquote:not(:where([class~="not-wysiwyg"],[class~="not-wysiwyg"] *)) {
    font-synthesis: none;
    font-variation-settings: 'ital' 1.75;
  }

  mark.highlight,
  .highlight {
    background-color: var(--highlight-bg-override, theme('colors.amber.100'));
  }

  .disclosure summary {
    @include a11y.focusOutlineAndResetHover;

    @apply list-none;
  }

  .extlink .material-symbols-sharp {
    font-size: var(--icon-size, 1em) !important;
    vertical-align: middle;
  }

  :is(.align-right, .align-left) {
    --float: none;
    --floated-space: theme('space.8');

    margin-top: 0;
  }

  :is(.align-right) {
    @apply @3xl/prose:[--float:right];
  }

  :is(.align-left) {
    @apply @3xl/prose:[--float:left];
  }

  @content;
}
