@layer reset, base, variants, sizes, states;
@layer reset {
  :host {
    display: block;
  }
  :host,
  :host *,
  :host ::before,
  :host ::after {
    box-sizing: border-box;
  }
  :host,
  :host *:not(dialog) {
    margin: 0;
  }
  :host {
    padding: 0;
    min-inline-size: 0;
    min-block-size: 0;
  }
  :host > * {
    interpolate-size: allow-keywords;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: var(--dds-font-family);
    font-feature-settings: var(--dds-font-features);
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  :host :focus-visible {
    outline: 2px solid var(--dds-color-border-focus);
  }
}
@layer base {
  :host {
    --_box-padding-block: var(
      --dds-box-padding-block,
      var(--dds-box-padding-block-none)
    );
    --_box-padding-inline: var(
      --dds-box-padding-inline,
      var(--dds-box-padding-inline-none)
    );
    --_box-background: var(
      --dds-box-background,
      var(--dds-box-background-none)
    );
    --_box-border-width: var(
      --dds-box-border-width,
      var(--dds-box-border-width-none)
    );
    --_box-border-color: var(
      --dds-box-border-color,
      var(--dds-box-border-color-4)
    );
    --_box-radius: var(--dds-box-radius, var(--dds-box-radius-none));
    padding-block: var(--_box-padding-block);
    padding-inline: var(--_box-padding-inline);
    background: var(--_box-background);
    border: var(--_box-border-width) solid var(--_box-border-color);
    border-radius: var(--_box-radius);
  }
}
/* audit-keep scss/later-layers-rewrite-hooks: overflow and display are keywords with no token to back an override hook, so variants set them directly; the size properties take an inline value from the component, so they read it from the hook; consumers override with CSS on the host */
@layer variants {
  :host([padding=none]) {
    --dds-box-padding-block: var(--dds-box-padding-block-none);
    --dds-box-padding-inline: var(--dds-box-padding-inline-none);
  }
  :host([padding=xxs]) {
    --dds-box-padding-block: var(--dds-box-padding-block-xxs);
    --dds-box-padding-inline: var(--dds-box-padding-inline-xxs);
  }
  :host([padding=xs]) {
    --dds-box-padding-block: var(--dds-box-padding-block-xs);
    --dds-box-padding-inline: var(--dds-box-padding-inline-xs);
  }
  :host([padding=s]) {
    --dds-box-padding-block: var(--dds-box-padding-block-s);
    --dds-box-padding-inline: var(--dds-box-padding-inline-s);
  }
  :host([padding=m]) {
    --dds-box-padding-block: var(--dds-box-padding-block-m);
    --dds-box-padding-inline: var(--dds-box-padding-inline-m);
  }
  :host([padding=l]) {
    --dds-box-padding-block: var(--dds-box-padding-block-l);
    --dds-box-padding-inline: var(--dds-box-padding-inline-l);
  }
  :host([padding=xl]) {
    --dds-box-padding-block: var(--dds-box-padding-block-xl);
    --dds-box-padding-inline: var(--dds-box-padding-inline-xl);
  }
  :host([padding-block=none]) {
    --dds-box-padding-block: var(--dds-box-padding-block-none);
  }
  :host([padding-inline=none]) {
    --dds-box-padding-inline: var(--dds-box-padding-inline-none);
  }
  :host([padding-block=xxs]) {
    --dds-box-padding-block: var(--dds-box-padding-block-xxs);
  }
  :host([padding-inline=xxs]) {
    --dds-box-padding-inline: var(--dds-box-padding-inline-xxs);
  }
  :host([padding-block=xs]) {
    --dds-box-padding-block: var(--dds-box-padding-block-xs);
  }
  :host([padding-inline=xs]) {
    --dds-box-padding-inline: var(--dds-box-padding-inline-xs);
  }
  :host([padding-block=s]) {
    --dds-box-padding-block: var(--dds-box-padding-block-s);
  }
  :host([padding-inline=s]) {
    --dds-box-padding-inline: var(--dds-box-padding-inline-s);
  }
  :host([padding-block=m]) {
    --dds-box-padding-block: var(--dds-box-padding-block-m);
  }
  :host([padding-inline=m]) {
    --dds-box-padding-inline: var(--dds-box-padding-inline-m);
  }
  :host([padding-block=l]) {
    --dds-box-padding-block: var(--dds-box-padding-block-l);
  }
  :host([padding-inline=l]) {
    --dds-box-padding-inline: var(--dds-box-padding-inline-l);
  }
  :host([padding-block=xl]) {
    --dds-box-padding-block: var(--dds-box-padding-block-xl);
  }
  :host([padding-inline=xl]) {
    --dds-box-padding-inline: var(--dds-box-padding-inline-xl);
  }
  :host([background=none]) {
    --dds-box-background: var(--dds-box-background-none);
  }
  :host([background="1"]) {
    --dds-box-background: var(--dds-box-background-1);
  }
  :host([background="2"]) {
    --dds-box-background: var(--dds-box-background-2);
  }
  :host([background="3"]) {
    --dds-box-background: var(--dds-box-background-3);
  }
  :host([background="4"]) {
    --dds-box-background: var(--dds-box-background-4);
  }
  :host([background="5"]) {
    --dds-box-background: var(--dds-box-background-5);
  }
  :host([background="6"]) {
    --dds-box-background: var(--dds-box-background-6);
  }
  :host([background="7"]) {
    --dds-box-background: var(--dds-box-background-7);
  }
  :host([border=none]) {
    --dds-box-border-width: var(--dds-box-border-width-none);
  }
  :host([border=s]) {
    --dds-box-border-width: var(--dds-box-border-width-s);
  }
  :host([border=m]) {
    --dds-box-border-width: var(--dds-box-border-width-m);
  }
  :host([border-color="1"]) {
    --dds-box-border-color: var(--dds-box-border-color-1);
  }
  :host([border-color="2"]) {
    --dds-box-border-color: var(--dds-box-border-color-2);
  }
  :host([border-color="3"]) {
    --dds-box-border-color: var(--dds-box-border-color-3);
  }
  :host([border-color="4"]) {
    --dds-box-border-color: var(--dds-box-border-color-4);
  }
  :host([border-color="5"]) {
    --dds-box-border-color: var(--dds-box-border-color-5);
  }
  :host([border-color="6"]) {
    --dds-box-border-color: var(--dds-box-border-color-6);
  }
  :host([radius=none]) {
    --dds-box-radius: var(--dds-box-radius-none);
  }
  :host([radius=inner]) {
    --dds-box-radius: var(--dds-box-radius-inner);
  }
  :host([radius=element]) {
    --dds-box-radius: var(--dds-box-radius-element);
  }
  :host([radius=container]) {
    --dds-box-radius: var(--dds-box-radius-container);
  }
  :host([radius=page]) {
    --dds-box-radius: var(--dds-box-radius-page);
  }
  :host([radius=full]) {
    --dds-box-radius: var(--dds-box-radius-full);
  }
  :host([overflow=visible]) {
    overflow: visible;
  }
  :host([overflow=hidden]) {
    overflow: hidden;
  }
  :host([overflow=clip]) {
    overflow: clip;
  }
  :host([overflow=auto]) {
    overflow: auto;
  }
  :host([overflow=scroll]) {
    overflow: scroll;
  }
  :host([display=none]) {
    display: none;
  }
  :host([inline-size]) {
    inline-size: var(--dds-box-inline-size);
  }
  :host([block-size]) {
    block-size: var(--dds-box-block-size);
  }
  :host([min-inline-size]) {
    min-inline-size: var(--dds-box-min-inline-size);
  }
  :host([min-block-size]) {
    min-block-size: var(--dds-box-min-block-size);
  }
  :host([max-inline-size]) {
    max-inline-size: var(--dds-box-max-inline-size);
  }
  :host([max-block-size]) {
    max-block-size: var(--dds-box-max-block-size);
  }
}
@layer sizes {}
@layer states {}