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

Shopify’s admin product component library

.Polaris-Avatar_z763p { position: relative; display: block; overflow: hidden; min-width: 1.5rem; max-width: 100%; background: var(--p-surface-neutral); color: var(--p-icon-subdued); border-radius: 1.875rem; -webkit-user-select: none; user-select: none; }

@media (forced-colors: active) { .Polaris-Avatar_z763p { border: 0.0625rem solid transparent; } }

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

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

.Polaris-Avatar--sizeExtraSmall_1twbb { width: 1.5rem; }

.Polaris-Avatar--sizeSmall_7647q { width: 2rem; }

.Polaris-Avatar--sizeMedium_5f35p { width: 2.5rem; }

.Polaris-Avatar--sizeLarge_61dxo { width: 3.75rem; }

.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: 1.875rem; 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%; }