@visa/nova-styles/components/avatar/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer components{:root,.v-alternate{--v-avatar-background:var(--palette-default-active);--v-avatar-foreground:var(--palette-default-text-on-active);--v-avatar-border-radius:var(--v-avatar-size);--v-avatar-size:3.4285714286rem;--v-avatar-icon-size:1.7142857143rem;--v-avatar-small-size:2.2857142857rem;--v-avatar-small-icon-size:1.7142857143rem;--v-avatar-small-vertical-icon-size:1.2857142857rem}}@layer components{.v-avatar{--typography-font-family:var(--typography-body-2-font-family);--typography-font-size:var(--typography-body-2-font-size);--typography-font-weight:var(--typography-body-2-font-weight);--typography-letter-spacing:var(--typography-body-2-letter-spacing);--typography-line-height:var(--typography-body-2-line-height);--typography-text-decoration:var(--typography-body-2-text-decoration);--typography-text-transform:var(--typography-body-2-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);background-color:var(--v-avatar-background);background-position:50%;background-repeat:no-repeat;background-size:cover;block-size:var(--v-avatar-size);border-radius:var(--v-avatar-border-radius);color:var(--v-avatar-foreground);display:grid;flex-shrink:0;inline-size:var(--v-avatar-size);place-content:center}.v-avatar:has(.v-icon){--v-icon-height:var(--v-avatar-icon-size);--v-icon-width:var(--v-avatar-icon-size)}.v-avatar:has(.v-icon)>.v-icon{--v-icon-primary:currentColor;--v-icon-secondary:currentColor;--v-icon-height:var(--v-avatar-icon-size);--v-icon-width:var(--v-avatar-icon-size)}@media(forced-colors: active){.v-avatar{color:currentColor}}.v-avatar.v-icon{--v-avatar-background:var(--palette-default-transparent);--v-avatar-border-radius:var(--size-rounded-none);--v-icon-height:var(--v-avatar-icon-size);--v-icon-width:var(--v-avatar-icon-size)}.v-avatar-small{--v-avatar-size:var(--v-avatar-small-size)}.v-avatar-small.v-icon,.v-avatar-small:has(.v-icon){--v-avatar-icon-size:var(--v-avatar-small-icon-size)}.v-avatar-small.v-icon:has(.v-icon-tiny),.v-avatar-small:has(.v-icon):has(.v-icon-tiny){--v-avatar-icon-size:var(--v-avatar-small-vertical-icon-size)}}