@volverjs/style/dist/components/vv-avatar.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-avatar-background-color:var(--color-brand);--vv-avatar-border-radius:var(--rounded);--vv-avatar-color:var(--color-white);--vv-avatar-display:inline-flex;--vv-avatar-position:relative;--vv-avatar-justify-content:center;--vv-avatar-align-items:center;--vv-avatar-font-size:var(--text-12);--vv-avatar-line-height:var(--leading-none);--vv-avatar-width:var(--spacing-28);--vv-avatar-height:var(--spacing-28);--vv-avatar-background-position:center;--vv-avatar-background-size:contain;--vv-avatar-background-repeat:no-repeat;--vv-avatar-object-fit:contain;--vv-avatar-flex-shrink:0;--vv-avatar-state-focus-visible-outline:var(--spacing-px) solid var(--color-brand);--vv-avatar-state-focus-visible-outline-offset:var(--spacing-0);--vv-avatar-element-badge-position:absolute;--vv-avatar-element-badge-top:0;--vv-avatar-element-badge-right:0;--vv-avatar-element-badge-translate:50% -33.3%;--vv-avatar-element-badge-box-shadow:var(--shadow-sm);--vv-avatar-element-badge-bottom-position:absolute;--vv-avatar-element-badge-bottom-bottom:0;--vv-avatar-element-badge-bottom-right:0;--vv-avatar-element-badge-bottom-translate:50% 33.3%;--vv-avatar-element-badge-bottom-box-shadow:var(--shadow-sm);--vv-avatar-element-image-width:100%;--vv-avatar-element-image-height:100%;--vv-avatar-element-image-object-fit:inherit;--vv-avatar-element-image-border-radius:var(--rounded);--vv-avatar-element-image-overflow:hidden;--vv-avatar-modifier-rounded-border-radius:var(--rounded-full);--vv-avatar-modifier-rounded-element-image-border-radius:var(--rounded-full);--vv-avatar-modifier-square-border-radius:var(--rounded-none);--vv-avatar-modifier-square-element-image-border-radius:var(--rounded-none);--vv-avatar-modifier-bordered-border-color:var(--color-brand-lighten-3);--vv-avatar-modifier-bordered-border-width:var(--border);--vv-avatar-modifier-bordered-border-style:solid;--vv-avatar-modifier-md-font-size:var(--text-14);--vv-avatar-modifier-md-width:var(--spacing-34);--vv-avatar-modifier-md-height:var(--spacing-34);--vv-avatar-modifier-lg-font-size:var(--text-16);--vv-avatar-modifier-lg-width:var(--spacing-40);--vv-avatar-modifier-lg-height:var(--spacing-40);--vv-avatar-modifier-transparent-background-color:var(--color-transparent);--vv-avatar-modifier-surface-background-color:var(--color-surface-2);--vv-avatar-modifier-surface-border-color:var(--color-surface-5);--vv-avatar-modifier-surface-color:var(--color-word-2);--vv-avatar-modifier-danger-background-color:var(--color-danger);--vv-avatar-modifier-danger-border-color:var(--color-danger-lighten-3);--vv-avatar-modifier-success-background-color:var(--color-success);--vv-avatar-modifier-success-border-color:var(--color-success-lighten-3);--vv-avatar-modifier-warning-background-color:var(--color-warning-darken-5);--vv-avatar-modifier-warning-border-color:var(--color-warning-darken-2);--vv-avatar-modifier-info-background-color:var(--color-info-darken-5);--vv-avatar-modifier-info-border-color:var(--color-info-darken-2);--vv-avatar-modifier-accent-background-color:var(--color-accent);--vv-avatar-modifier-accent-border-color:var(--color-accent-darken-3);--vv-avatar-modifier-gray-background-color:var(--color-gray-darken-1);--vv-avatar-modifier-gray-border-color:var(--color-gray-lighten-2);--vv-avatar-modifier-ring-color:var(--color-brand-darken-3);--vv-avatar-modifier-ring-background-color:var(--color-surface-brand);--vv-avatar-modifier-ring-border-color:currentcolor;--vv-avatar-modifier-ring-border-width:var(--border);--vv-avatar-modifier-ring-border-style:solid;--vv-avatar-modifier-ring-modifier-surface-background-color:var(--color-surface);--vv-avatar-modifier-ring-modifier-surface-color:var(--color-word-2);--vv-avatar-modifier-ring-modifier-danger-background-color:var(--color-surface-danger);--vv-avatar-modifier-ring-modifier-danger-color:var(--color-danger);--vv-avatar-modifier-ring-modifier-success-background-color:var(--color-surface-success);--vv-avatar-modifier-ring-modifier-success-color:var(--color-success-darken-3);--vv-avatar-modifier-ring-modifier-warning-background-color:var(--color-surface-warning);--vv-avatar-modifier-ring-modifier-warning-color:var(--color-warning-darken-5);--vv-avatar-modifier-ring-modifier-info-background-color:var(--color-surface-info);--vv-avatar-modifier-ring-modifier-info-color:var(--color-info-darken-5);--vv-avatar-modifier-ring-modifier-accent-background-color:var(--color-surface-accent);--vv-avatar-modifier-ring-modifier-accent-color:var(--color-accent);--vv-avatar-modifier-ring-modifier-gray-background-color:var(--color-surface-4);--vv-avatar-modifier-ring-modifier-gray-color:var(--color-word-2)}:where(.vv-avatar){background-color:var(--vv-avatar-background-color);border-radius:var(--vv-avatar-border-radius);color:var(--vv-avatar-color);display:var(--vv-avatar-display);position:var(--vv-avatar-position);justify-content:var(--vv-avatar-justify-content);align-items:var(--vv-avatar-align-items);font-size:var(--vv-avatar-font-size);line-height:var(--vv-avatar-line-height);width:var(--vv-avatar-width);height:var(--vv-avatar-height);background-position:var(--vv-avatar-background-position);background-size:var(--vv-avatar-background-size);background-repeat:var(--vv-avatar-background-repeat);-o-object-fit:var(--vv-avatar-object-fit);object-fit:var(--vv-avatar-object-fit);flex-shrink:var(--vv-avatar-flex-shrink)}:where(.vv-avatar__badge,.vv-avatar>sup){position:var(--vv-avatar-element-badge-position);top:var(--vv-avatar-element-badge-top);right:var(--vv-avatar-element-badge-right);translate:var(--vv-avatar-element-badge-translate);box-shadow:var(--vv-avatar-element-badge-box-shadow)}:where(.vv-avatar__badge-bottom,.vv-avatar>sub){position:var(--vv-avatar-element-badge-bottom-position);bottom:var(--vv-avatar-element-badge-bottom-bottom);right:var(--vv-avatar-element-badge-bottom-right);translate:var(--vv-avatar-element-badge-bottom-translate);box-shadow:var(--vv-avatar-element-badge-bottom-box-shadow)}:where(.vv-avatar__image,.vv-avatar>img){width:var(--vv-avatar-element-image-width);height:var(--vv-avatar-element-image-height);-o-object-fit:var(--vv-avatar-element-image-object-fit);object-fit:var(--vv-avatar-element-image-object-fit);border-radius:var(--vv-avatar-element-image-border-radius);overflow:var(--vv-avatar-element-image-overflow)}:where(.vv-avatar--focus-visible,.vv-avatar.focus-visible,.vv-avatar:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled=true]):focus-visible){outline:var(--vv-avatar-state-focus-visible-outline);outline-offset:var(--vv-avatar-state-focus-visible-outline-offset)}:where(.vv-avatar--rounded.vv-avatar){--vv-avatar-border-radius:var(--vv-avatar-modifier-rounded-border-radius)}:where(.vv-avatar--rounded>.vv-avatar__image,.vv-avatar--rounded>img){border-radius:var(--vv-avatar-modifier-rounded-element-image-border-radius)}:where(.vv-avatar--square.vv-avatar){--vv-avatar-border-radius:var(--vv-avatar-modifier-square-border-radius)}:where(.vv-avatar--square>.vv-avatar__image,.vv-avatar--square>img){border-radius:var(--vv-avatar-modifier-square-element-image-border-radius)}:where(.vv-avatar--bordered.vv-avatar){border-color:var(--vv-avatar-modifier-bordered-border-color);border-width:var(--vv-avatar-modifier-bordered-border-width);border-style:var(--vv-avatar-modifier-bordered-border-style)}:where(.vv-avatar--md.vv-avatar){--vv-avatar-font-size:var(--vv-avatar-modifier-md-font-size);--vv-avatar-width:var(--vv-avatar-modifier-md-width);--vv-avatar-height:var(--vv-avatar-modifier-md-height)}:where(.vv-avatar--lg.vv-avatar){--vv-avatar-font-size:var(--vv-avatar-modifier-lg-font-size);--vv-avatar-width:var(--vv-avatar-modifier-lg-width);--vv-avatar-height:var(--vv-avatar-modifier-lg-height)}:where(.vv-avatar--transparent.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-transparent-background-color)}:where(.vv-avatar--surface.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-surface-background-color);border-color:var(--vv-avatar-modifier-surface-border-color);--vv-avatar-color:var(--vv-avatar-modifier-surface-color)}:where(.vv-avatar--danger.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-danger-background-color);border-color:var(--vv-avatar-modifier-danger-border-color)}:where(.vv-avatar--success.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-success-background-color);border-color:var(--vv-avatar-modifier-success-border-color)}:where(.vv-avatar--warning.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-warning-background-color);border-color:var(--vv-avatar-modifier-warning-border-color)}:where(.vv-avatar--info.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-info-background-color);border-color:var(--vv-avatar-modifier-info-border-color)}:where(.vv-avatar--accent.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-accent-background-color);border-color:var(--vv-avatar-modifier-accent-border-color)}:where(.vv-avatar--gray.vv-avatar){--vv-avatar-background-color:var(--vv-avatar-modifier-gray-background-color);border-color:var(--vv-avatar-modifier-gray-border-color)}:where(.vv-avatar--ring.vv-avatar){--vv-avatar-color:var(--vv-avatar-modifier-ring-color);--vv-avatar-background-color:var(--vv-avatar-modifier-ring-background-color);border-color:var(--vv-avatar-modifier-ring-border-color);border-width:var(--vv-avatar-modifier-ring-border-width);border-style:var(--vv-avatar-modifier-ring-border-style)}:where(.vv-avatar--ring.vv-avatar--surface.vv-avatar){--vv-avatar-modifier-ring-background-color:var(--vv-avatar-modifier-ring-modifier-surface-background-color);--vv-avatar-modifier-ring-color:var(--vv-avatar-modifier-ring-modifier-surface-color)}:where(.vv-avatar--ring.vv-avatar--danger.vv-avatar){--vv-avatar-modifier-ring-background-color:var(--vv-avatar-modifier-ring-modifier-danger-background-color);--vv-avatar-modifier-ring-color:var(--vv-avatar-modifier-ring-modifier-danger-color)}:where(.vv-avatar--ring.vv-avatar--success.vv-avatar){--vv-avatar-modifier-ring-background-color:var(--vv-avatar-modifier-ring-modifier-success-background-color);--vv-avatar-modifier-ring-color:var(--vv-avatar-modifier-ring-modifier-success-color)}:where(.vv-avatar--ring.vv-avatar--warning.vv-avatar){--vv-avatar-modifier-ring-background-color:var(--vv-avatar-modifier-ring-modifier-warning-background-color);--vv-avatar-modifier-ring-color:var(--vv-avatar-modifier-ring-modifier-warning-color)}:where(.vv-avatar--ring.vv-avatar--info.vv-avatar){--vv-avatar-modifier-ring-background-color:var(--vv-avatar-modifier-ring-modifier-info-background-color);--vv-avatar-modifier-ring-color:var(--vv-avatar-modifier-ring-modifier-info-color)}:where(.vv-avatar--ring.vv-avatar--accent.vv-avatar){--vv-avatar-modifier-ring-background-color:var(--vv-avatar-modifier-ring-modifier-accent-background-color);--vv-avatar-modifier-ring-color:var(--vv-avatar-modifier-ring-modifier-accent-color)}:where(.vv-avatar--ring.vv-avatar--gray.vv-avatar){--vv-avatar-modifier-ring-background-color:var(--vv-avatar-modifier-ring-modifier-gray-background-color);--vv-avatar-modifier-ring-color:var(--vv-avatar-modifier-ring-modifier-gray-color)}