@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosans/v38/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5a7du3mhPy0.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  @apply h-full scroll-smooth leading-4 antialiased [view-transition-name:none];
}

html[data-preview-overlay='true'] {
  @apply fixed size-full overflow-hidden bg-transparent bg-none;
}

.screen-reader-only {
  @apply !sr-only;
}

/* Adds a glow effect to the focused region target */
.is-focusRegionTarget {
  @apply !ring-offset-1 outline-none !ring-4 !ring-primary-300 !ring-offset-primary-700 transition-[box-shadow] duration-500;
}

/* Smoothly transitions out of the glow effect above */
.was-focusRegionTarget {
  @apply transition-[box-shadow] duration-500 ease-out;
}

[hidden],
.hide {
  @apply !hidden;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

/* Hide native selects to reduce the amount of repainting and visual changes while custom ComboInput is rendered. */
select {
  @apply min-h-[38px] w-auto min-w-[25cqw] appearance-none opacity-0;
}

/* Hide frames which are in a loaded state but empty... weird... this should probably be part of frame styles proper. */
.frame.loaded:empty {
  @apply !hidden;
}

/* Hides Theme until we decide what to do with it. */
.themeColorContainer {
  @apply !hidden;
}

/*
  For a11y, we need to ensure that the font size is not too small on smaller screens
  otherwise some browsers will auto-zoom when the input is focused.
*/
input,
select,
textarea,
.ComboInput-label,
.ComboInput-option {
  @apply max-md:!text-[1rem]; /* assumes 16px base font size */
}

form {
  &.is-submitting {
    button.is-clicked {
      @apply btu-button-disabled before:btu-loader before:blokk before:size-[1.2rem];
    }
  }
}
