@use "variables.scss";

:global {
  .material-symbols-outlined {
    font-variation-settings:
      "FILL" 0,
      "wght" 300,
      "GRAD" 0,
      "opsz" 24;
  }

  *,
  ::before,
  ::after {
    overflow-anchor: none;
    scroll-behavior: smooth;
    box-sizing: border-box;
    outline-offset: 0px;
    outline-width: var(--sui-focus-ring-width) !important;
    outline-style: solid;
    outline-color: transparent;
    border-width: 0;
    border-style: solid;
    vertical-align: top;
    font-size-adjust: inherit;

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
      // Disable transition but make sure the `transitionend` event works
      transition-duration: 1ms !important;
    }
  }

  ::selection {
    background-color: var(--sui-primary-accent-color-translucent-light);
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  :focus {
    z-index: 1;
    outline-width: 0;
  }

  :focus-visible {
    outline-color: var(--sui-focus-ring-color);
    outline-offset: var(--sui-focus-ring-offset, 0);
    z-index: 2;
  }

  h1 {
    margin: var(--sui-h1-margin, var(--sui-heading-margin));
    font-size: var(--sui-h1-font-size, 34px);
    font-family: var(--sui-h1-font-family, var(--sui-heading-font-family));
    font-weight: var(--sui-h1-font-weight, var(--sui-heading-font-weight));
    line-height: var(--sui-h1-line-height, var(--sui-heading-line-height));
  }

  h2 {
    margin: var(--sui-h2-margin, var(--sui-heading-margin));
    font-size: var(--sui-h2-font-size, 30px);
    font-family: var(--sui-h2-font-family, var(--sui-heading-font-family));
    font-weight: var(--sui-h2-font-weight, var(--sui-heading-font-weight));
    line-height: var(--sui-h2-line-height, var(--sui-heading-line-height));
  }

  h3 {
    margin: var(--sui-h3-margin, var(--sui-heading-margin));
    font-size: var(--sui-h3-font-size, 26px);
    font-family: var(--sui-h3-font-family, var(--sui-heading-font-family));
    font-weight: var(--sui-h3-font-weight, var(--sui-heading-font-weight));
    line-height: var(--sui-h3-line-height, var(--sui-heading-line-height));
  }

  h4 {
    margin: var(--sui-h4-margin, var(--sui-heading-margin));
    font-size: var(--sui-h4-font-size, 22px);
    font-family: var(--sui-h4-font-family, var(--sui-heading-font-family));
    font-weight: var(--sui-h4-font-weight, var(--sui-heading-font-weight));
    line-height: var(--sui-h4-line-height, var(--sui-heading-line-height));
  }

  h5 {
    margin: var(--sui-h5-margin, var(--sui-heading-margin));
    font-size: var(--sui-h5-font-size, 18px);
    font-family: var(--sui-h5-font-family, var(--sui-heading-font-family));
    font-weight: var(--sui-h5-font-weight, var(--sui-heading-font-weight));
    line-height: var(--sui-h5-line-height, var(--sui-heading-line-height));
  }

  h6 {
    margin: var(--sui-h6-margin, var(--sui-heading-margin));
    font-size: var(--sui-h6-font-size, 14px);
    font-family: var(--sui-h6-font-family, var(--sui-heading-font-family));
    font-weight: var(--sui-h6-font-weight, var(--sui-heading-font-weight));
    line-height: var(--sui-h6-line-height, var(--sui-heading-line-height));
  }

  strong {
    font-weight: var(--sui-font-weight-bold, bold);
  }

  a {
    color: var(--sui-primary-accent-color-text);
    text-decoration: none;
    text-underline-offset: 2px;

    &:is(:hover, :focus, :active) {
      text-decoration: underline;
    }

    :global(:is(:root, :host)[data-underline-links="true"]) & {
      text-decoration: underline;
    }
  }

  :is(p, ul, ol, dl) {
    margin: var(--sui-paragraph-margin) 0;
    line-height: var(--sui-line-height-comfortable);
  }

  :is(ul, ol) {
    padding-inline: 2em;
  }

  :is(code, pre) {
    border-radius: 4px;
    background-color: var(--sui-code-background-color);
    font-family: var(--sui-font-family-monospace);
    font-size: var(--sui-font-size-monospace);
    vertical-align: -0.05em;
  }

  pre {
    padding: 8px;
    line-height: var(--sui-line-height-compact);
    -webkit-user-select: text;
    user-select: text;
  }

  code {
    padding: 2px 4px;
  }

  table {
    border-collapse: collapse;
  }

  :is(th, td) {
    border: 1px solid var(--sui-textbox-border-color);
    padding: 8px;
  }

  blockquote {
    margin-inline: 16px 0;
    border-inline-start: 4px solid var(--sui-textbox-border-color);
    padding-inline-start: 12px;
  }

  :is(.disabled, [aria-disabled="true"], [inert]):not(body) {
    cursor: default;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));

    * {
      filter: grayscale(0) opacity(1); // Maintain the opacity on child nodes
    }
  }

  :is(.disabled, [aria-disabled="true"], [inert]) {
    * {
      cursor: default;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
    }
  }

  // A read-only control is not inactive: its value is content the user reads and copies, so it
  // keeps full contrast and stays selectable (WCAG 1.4.3). Only the cursor changes.
  :is(.readonly, [aria-readonly="true"]):not(body) {
    cursor: default;

    * {
      cursor: default;
    }
  }
}