@layer reset, base, variants, sizes, states;
@layer reset {
  :host {
    display: grid;
  }
  :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 {
    --_grid-row-gap: var(--dds-grid-row-gap, var(--dds-grid-row-gap-none));
    --_grid-column-gap: var(
      --dds-grid-column-gap,
      var(--dds-grid-column-gap-none)
    );
    --_grid-template-columns: var(--dds-grid-template-columns);
    --_grid-template-rows: var(--dds-grid-template-rows);
    grid-template-columns: var(--_grid-template-columns);
    grid-template-rows: var(--_grid-template-rows);
    gap: var(--_grid-row-gap) var(--_grid-column-gap);
  }
}
/* audit-keep scss/later-layers-rewrite-hooks: the alignment properties are keywords with no token to back an override hook, so variants set them directly; consumers override with CSS on the host */
@layer variants {
  :host([gap=none]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-none);
    --dds-grid-column-gap: var(--dds-grid-column-gap-none);
  }
  :host([gap=xxs]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-xxs);
    --dds-grid-column-gap: var(--dds-grid-column-gap-xxs);
  }
  :host([gap=xs]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-xs);
    --dds-grid-column-gap: var(--dds-grid-column-gap-xs);
  }
  :host([gap=s]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-s);
    --dds-grid-column-gap: var(--dds-grid-column-gap-s);
  }
  :host([gap=m]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-m);
    --dds-grid-column-gap: var(--dds-grid-column-gap-m);
  }
  :host([gap=l]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-l);
    --dds-grid-column-gap: var(--dds-grid-column-gap-l);
  }
  :host([gap=xl]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-xl);
    --dds-grid-column-gap: var(--dds-grid-column-gap-xl);
  }
  :host([row-gap=none]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-none);
  }
  :host([column-gap=none]) {
    --dds-grid-column-gap: var(--dds-grid-column-gap-none);
  }
  :host([row-gap=xxs]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-xxs);
  }
  :host([column-gap=xxs]) {
    --dds-grid-column-gap: var(--dds-grid-column-gap-xxs);
  }
  :host([row-gap=xs]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-xs);
  }
  :host([column-gap=xs]) {
    --dds-grid-column-gap: var(--dds-grid-column-gap-xs);
  }
  :host([row-gap=s]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-s);
  }
  :host([column-gap=s]) {
    --dds-grid-column-gap: var(--dds-grid-column-gap-s);
  }
  :host([row-gap=m]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-m);
  }
  :host([column-gap=m]) {
    --dds-grid-column-gap: var(--dds-grid-column-gap-m);
  }
  :host([row-gap=l]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-l);
  }
  :host([column-gap=l]) {
    --dds-grid-column-gap: var(--dds-grid-column-gap-l);
  }
  :host([row-gap=xl]) {
    --dds-grid-row-gap: var(--dds-grid-row-gap-xl);
  }
  :host([column-gap=xl]) {
    --dds-grid-column-gap: var(--dds-grid-column-gap-xl);
  }
  :host([align-items=start]) {
    align-items: start;
  }
  :host([justify-items=start]) {
    justify-items: start;
  }
  :host([align-items=end]) {
    align-items: end;
  }
  :host([justify-items=end]) {
    justify-items: end;
  }
  :host([align-items=center]) {
    align-items: center;
  }
  :host([justify-items=center]) {
    justify-items: center;
  }
  :host([align-items=stretch]) {
    align-items: stretch;
  }
  :host([justify-items=stretch]) {
    justify-items: stretch;
  }
  :host([align-items=baseline]) {
    align-items: baseline;
  }
  :host([justify-items=baseline]) {
    justify-items: baseline;
  }
  :host([align-items=normal]) {
    align-items: normal;
  }
  :host([justify-items=normal]) {
    justify-items: normal;
  }
  :host([align-content=start]) {
    align-content: start;
  }
  :host([justify-content=start]) {
    justify-content: start;
  }
  :host([align-content=end]) {
    align-content: end;
  }
  :host([justify-content=end]) {
    justify-content: end;
  }
  :host([align-content=center]) {
    align-content: center;
  }
  :host([justify-content=center]) {
    justify-content: center;
  }
  :host([align-content=stretch]) {
    align-content: stretch;
  }
  :host([justify-content=stretch]) {
    justify-content: stretch;
  }
  :host([align-content=baseline]) {
    align-content: baseline;
  }
  :host([justify-content=baseline]) {
    justify-content: baseline;
  }
  :host([align-content=space-between]) {
    align-content: space-between;
  }
  :host([justify-content=space-between]) {
    justify-content: space-between;
  }
  :host([align-content=space-around]) {
    align-content: space-around;
  }
  :host([justify-content=space-around]) {
    justify-content: space-around;
  }
  :host([align-content=space-evenly]) {
    align-content: space-evenly;
  }
  :host([justify-content=space-evenly]) {
    justify-content: space-evenly;
  }
  :host([align-content=normal]) {
    align-content: normal;
  }
  :host([justify-content=normal]) {
    justify-content: normal;
  }
}
@layer sizes {}
@layer states {}