@layer components {
  .rs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1em;
    block-size: 1em;
    aspect-ratio: 1;
    color: currentcolor;
    transition: color var(--rs-duration-fast) var(--rs-easing-standard);
    vertical-align: -0.125em;
  }

  .rs-icon[data-size="large"] {
    inline-size: var(--rs-unit-x6);
    block-size: var(--rs-unit-x6);
  }

  .rs-icon[data-tone="neutral-faded"] {
    color: var(--rs-color-foreground-neutral-faded);
  }

  .rs-icon[data-tone="primary"] {
    color: var(--rs-color-foreground-primary);
  }

  .rs-icon[data-tone="positive"] {
    color: var(--rs-color-foreground-positive);
  }

  .rs-icon[data-tone="warning"] {
    color: var(--rs-color-foreground-warning);
  }

  .rs-icon[data-tone="critical"] {
    color: var(--rs-color-foreground-critical);
  }

  .rs-icon[data-tone="disabled"] {
    color: var(--rs-color-foreground-disabled);
  }

  .rs-icon > svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
}