frutjam/dist/components/avatar.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.avatar{--avatar-size:2.5rem;--avatar-radius:9999px;--avatar-bg:var(--color-base-soft);--avatar-color:var(--color-on-base);--avatar-font-size:calc(var(--avatar-size)*0.4);--avatar-status-size:calc(var(--avatar-size)*0.28);--avatar-status-offset:0px;--avatar-ring-width:0px;--avatar-ring-color:var(--color-primary);--avatar-ring-offset:2px;--avatar-status-color:transparent;--avatar-status-visible:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--avatar-size);height:var(--avatar-size);border-radius:var(--avatar-radius);background-color:var(--avatar-bg);color:var(--avatar-color);font-size:var(--avatar-font-size);font-weight:600;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:var(--avatar-ring-width) solid var(--avatar-ring-color);outline-offset:var(--avatar-ring-offset);:where(&) :where(img){width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:inherit;overflow:hidden}&:before{content:"";position:absolute;bottom:var(--avatar-status-offset);right:var(--avatar-status-offset);width:var(--avatar-status-size);height:var(--avatar-status-size);border-radius:9999px;border:2px solid var(--color-base);background-color:var(--avatar-status-color);z-index:1;display:var(--avatar-status-visible)}}.avatar-group{display:inline-flex;flex-direction:row;:where(&) :where(.avatar){border:2px solid var(--color-base);margin-inline-start:calc(var(--avatar-size)*-.25);&:first-child{margin-inline-start:0}}}.avatar-2xl{--avatar-size:7rem;--avatar-status-offset:3px}.avatar-accent{--avatar-bg:var(--color-accent);--avatar-color:var(--color-on-accent)}.avatar-away{--avatar-status-color:var(--color-warning);--avatar-status-visible:block}.avatar-busy{--avatar-status-color:var(--color-error);--avatar-status-visible:block}.avatar-error{--avatar-bg:var(--color-error);--avatar-color:var(--color-on-error)}.avatar-info{--avatar-bg:var(--color-info);--avatar-color:var(--color-on-info)}.avatar-lg{--avatar-size:3.5rem;--avatar-status-offset:1px}.avatar-neutral{--avatar-bg:var(--color-neutral);--avatar-color:var(--color-on-neutral)}.avatar-offline{--avatar-status-color:var(--color-base-400);--avatar-status-visible:block}.avatar-online{--avatar-status-color:var(--color-success);--avatar-status-visible:block}.avatar-primary{--avatar-bg:var(--color-primary);--avatar-color:var(--color-on-primary)}.avatar-ring{--avatar-ring-width:2px;--avatar-ring-color:var(--avatar-bg)}.avatar-ring-accent{--avatar-ring-width:2px;--avatar-ring-color:var(--color-accent)}.avatar-ring-error{--avatar-ring-width:2px;--avatar-ring-color:var(--color-error)}.avatar-ring-info{--avatar-ring-width:2px;--avatar-ring-color:var(--color-info)}.avatar-ring-neutral{--avatar-ring-width:2px;--avatar-ring-color:var(--color-neutral)}.avatar-ring-primary{--avatar-ring-width:2px;--avatar-ring-color:var(--color-primary)}.avatar-ring-secondary{--avatar-ring-width:2px;--avatar-ring-color:var(--color-secondary)}.avatar-ring-success{--avatar-ring-width:2px;--avatar-ring-color:var(--color-success)}.avatar-ring-warning{--avatar-ring-width:2px;--avatar-ring-color:var(--color-warning)}.avatar-secondary{--avatar-bg:var(--color-secondary);--avatar-color:var(--color-on-secondary)}.avatar-sm{--avatar-size:2rem;--avatar-status-offset:-1px}.avatar-success{--avatar-bg:var(--color-success);--avatar-color:var(--color-on-success)}.avatar-warning{--avatar-bg:var(--color-warning);--avatar-color:var(--color-on-warning)}.avatar-xl{--avatar-size:5rem;--avatar-status-offset:2px}.avatar-xs{--avatar-size:1.5rem;--avatar-status-offset:-1px}.avatar-circle{--avatar-radius:9999px}.avatar-md{--avatar-size:2.5rem}.avatar-rounded{--avatar-radius:calc(var(--border-radius)*3)}.avatar-square{--avatar-radius:var(--border-radius)}