welcome-ui/dist/Avatar.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._root_4g321_2{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;aspect-ratio:1/1;flex-shrink:0;border-radius:var(--avatar-border-radius);color:var(--color);width:var(--size);height:var(--size);background-color:var(--backgroundColor);font-size:calc(var(--size) / 2.5)}._root_4g321_2 img{object-fit:cover;width:100%;height:100%}._size-xs_4g321_24{--size: var(--avatar-size-xs)}._size-sm_4g321_27{--size: var(--avatar-size-sm)}._size-md_4g321_30{--size: var(--avatar-size-md)}._size-lg_4g321_33{--size: var(--avatar-size-lg)}._placeholder_4g321_36{display:flex;align-items:center;justify-content:center;--backgroundColor: var(--avatar-color-background-placeholder)}._placeholder-icon_4g321_42{color:var(--avatar-color-icon-placeholder)}._background-secondary-blue_4g321_45{--backgroundColor: var(--avatar-color-background-initials-blue);--color: var(--avatar-color-text-initials-blue)}._background-secondary-green_4g321_49{--backgroundColor: var(--avatar-color-background-initials-green);--color: var(--avatar-color-text-initials-green)}._background-secondary-orange_4g321_53{--backgroundColor: var(--avatar-color-background-initials-orange);--color: var(--avatar-color-text-initials-orange)}._background-secondary-pink_4g321_57{--backgroundColor: var(--avatar-color-background-initials-pink);--color: var(--avatar-color-text-initials-pink)}._background-secondary-teal_4g321_61{--backgroundColor: var(--avatar-color-background-initials-teal);--color: var(--avatar-color-text-initials-teal)}._background-secondary-violet_4g321_65{--backgroundColor: var(--avatar-color-background-initials-violet);--color: var(--avatar-color-text-initials-violet)}}