@shopify/polaris/build/esnext/components/Avatar/Avatar.css

Shopify’s admin product component library

.Polaris-Avatar_z763p { --pc-avatar-extra-small-size: 1.5rem; --pc-avatar-small-size: 2rem; --pc-avatar-medium-size: 2.5rem; --pc-avatar-large-size: 3.75rem; position: relative; display: block; overflow: hidden; min-width: var(--pc-avatar-extra-small-size); max-width: 100%; background: var(--p-surface-neutral); color: var(--p-icon-subdued); border-radius: var(--p-border-radius-half); -webkit-user-select: none; user-select: none; }

@media (forced-colors: active) { .Polaris-Avatar_z763p { border: var(--p-border-width-1) solid transparent; } }

.Polaris-Avatar_z763p::after { content: ''; display: block; padding-bottom: 100%; }

.Polaris-Avatar--hidden_riqie { visibility: hidden; }

.Polaris-Avatar--sizeExtraSmall_1twbb { width: var(--pc-avatar-extra-small-size); }

.Polaris-Avatar--sizeSmall_7647q { width: var(--pc-avatar-small-size); }

.Polaris-Avatar--sizeMedium_5f35p { width: var(--pc-avatar-medium-size); }

.Polaris-Avatar--sizeLarge_61dxo { width: var(--pc-avatar-large-size); }

.Polaris-Avatar--styleOne_jtsnj { color: var(--p-decorative-one-text); background: var(--p-decorative-one-surface); }

.Polaris-Avatar--styleTwo_15kyd { color: var(--p-decorative-two-text); background: var(--p-decorative-two-surface); }

.Polaris-Avatar--styleThree_1sohp { color: var(--p-decorative-three-text); background: var(--p-decorative-three-surface); }

.Polaris-Avatar--styleFour_16hgi { color: var(--p-decorative-four-text); background: var(--p-decorative-four-surface); }

.Polaris-Avatar--styleFive_dypl0 { color: var(--p-decorative-five-text); background: var(--p-decorative-five-surface); }

.Polaris-Avatar--hasImage_1hz8x { background: transparent; }

.Polaris-Avatar__Image_2qgms { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: var(--p-background); border-radius: var(--p-border-radius-half); transform: translate(-50%, -50%); object-fit: cover; }

.Polaris-Avatar__Initials_5s4f1 { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.Polaris-Avatar__Svg_375hu { width: 100%; height: 100%; }