@layer reset, base, variants, states, sizes;

@layer reset {
  :host {
    display: contents;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    font-family: var(--dds-font-family-sans);
    font-feature-settings: var(--dds-font-features-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    *,
    *::after,
    *::before,
    *::backdrop,
    *::file-selector-button {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      min-inline-size: 0;
      min-block-size: 0;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: color-mix(gray 50%, transparent);
    }

    *:focus-visible {
      z-index: 1;
    }

    > * {
      interpolate-size: allow-keywords;
      -webkit-tap-highlight-color: transparent;
    }
  }
}
