@layer components {
  .avatar {
    --avatar-size: 2rem;

    flex: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--avatar-size) * 0.38);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
    box-shadow: var(--shadow-inner);
  }

  .avatar--blue {
    background-image: linear-gradient(to bottom right, var(--color-blue-100), var(--color-blue-50));
    color: var(--color-blue-700);
  }

  .avatar--emerald {
    background-image: linear-gradient(to bottom right, var(--color-emerald-100), var(--color-emerald-50));
    color: var(--color-emerald-700);
  }

  .avatar--amber {
    background-image: linear-gradient(to bottom right, var(--color-amber-100), var(--color-amber-50));
    color: var(--color-amber-700);
  }

  .avatar--rose {
    background-image: linear-gradient(to bottom right, var(--color-rose-100), var(--color-rose-50));
    color: var(--color-rose-600);
  }
}