@layer components {
  svg.ui-icon[data-slot="icon"] {
    inline-size: var(--icon-glyph-size);
    block-size: var(--icon-glyph-size);

    flex: 0 0 auto;
  }

  .ui-icon[data-size="2xs"] {
    --icon-glyph-size: var(--icon-size-2xs);
  }
  .ui-icon[data-size="xs"] {
    --icon-glyph-size: var(--icon-size-xs);
  }
  .ui-icon[data-size="sm"] {
    --icon-glyph-size: var(--icon-size-sm);
  }
  .ui-icon[data-size="md"] {
    --icon-glyph-size: var(--icon-size-md);
  }
  .ui-icon[data-size="lg"] {
    --icon-glyph-size: var(--icon-size-lg);
  }
  .ui-icon[data-size="xl"] {
    --icon-glyph-size: var(--icon-size-xl);
  }
  .ui-icon[data-size="2xl"] {
    --icon-glyph-size: var(--icon-size-2xl);
  }
  .ui-icon[data-size="3xl"] {
    --icon-glyph-size: var(--icon-size-3xl);
  }
  .ui-icon[data-size="4xl"] {
    --icon-glyph-size: var(--icon-size-4xl);
  }
}