@layer reset, base, sizes;
@layer reset {
  :host {
    display: inline-flex;
  }
}
@layer base {
  :host {
    --_spinner-size: var(--dds-spinner-size, var(--dds-icon-size-m));
  }
  :host [data-part=root] {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--_spinner-size);
    height: var(--_spinner-size);
    pointer-events: none;
    animation-name: dds-animation-spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    fill: #000;
  }
  @keyframes dds-animation-spin {
    to {
      rotate: 360deg;
    }
  }
}
@layer sizes {
  :host([size="2xs"]) {
    --dds-spinner-size: var(--dds-icon-size-2xs);
  }
  :host([size=xs]) {
    --dds-spinner-size: var(--dds-icon-size-xs);
  }
  :host([size=s]) {
    --dds-spinner-size: var(--dds-icon-size-s);
  }
  :host([size=m]) {
    --dds-spinner-size: var(--dds-icon-size-m);
  }
  :host([size=l]) {
    --dds-spinner-size: var(--dds-icon-size-l);
  }
}