@layer components {
  .rs-avatar {
    --rs-avatar-size: var(--rs-unit-x8);
    --rs-avatar-bg: var(--rs-color-background-neutral);
    --rs-avatar-fg: var(--rs-color-on-background-neutral);
    display: inline-grid;
    place-items: center;
    inline-size: var(--rs-avatar-size);
    block-size: var(--rs-avatar-size);
    aspect-ratio: 1;
    border-radius: var(--rs-radius-circular);
    overflow: hidden;
    background: var(--rs-avatar-bg);
    color: var(--rs-avatar-fg);
    font-size: calc(var(--rs-avatar-size) / 3);
    font-weight: var(--rs-font-weight-bold);
    line-height: 1;
    text-transform: uppercase;
  }

  .rs-avatar[data-size="small"] {
    --rs-avatar-size: var(--rs-unit-x6);
  }

  .rs-avatar[data-size="large"] {
    --rs-avatar-size: var(--rs-unit-x10);
  }

  .rs-avatar[data-tone="primary"] {
    --rs-avatar-bg: var(--rs-color-background-primary);
    --rs-avatar-fg: var(--rs-color-on-background-primary);
  }

  .rs-avatar[data-tone="positive"] {
    --rs-avatar-bg: var(--rs-color-background-positive);
    --rs-avatar-fg: var(--rs-color-on-background-positive);
  }

  .rs-avatar[data-tone="critical"] {
    --rs-avatar-bg: var(--rs-color-background-critical);
    --rs-avatar-fg: var(--rs-color-on-background-critical);
  }

  .rs-avatar[data-variant="faded"][data-tone="primary"] {
    --rs-avatar-bg: var(--rs-color-background-primary-faded);
    --rs-avatar-fg: var(--rs-color-foreground-primary);
  }

  .rs-avatar[data-variant="faded"][data-tone="positive"] {
    --rs-avatar-bg: var(--rs-color-background-positive-faded);
    --rs-avatar-fg: var(--rs-color-foreground-positive);
  }

  .rs-avatar[data-variant="faded"][data-tone="critical"] {
    --rs-avatar-bg: var(--rs-color-background-critical-faded);
    --rs-avatar-fg: var(--rs-color-foreground-critical);
  }

  .rs-avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}