/* components/avatar/avatar.css — Avatar (doc, Componentes > Avatar). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Alias: valor por defecto; un Tema lo cambia en ms.theme */
  :root {
    --_ms-avatarSize_s: var(--ms-spacing_32);
    --_ms-avatarSize_m: var(--ms-spacing_40);
    --_ms-avatarSize_l: var(--ms-spacing_56);
    --_ms-avatarSize_xl: var(--ms-spacing_96);
    --ms-avatarRadius: var(--ms-radiusRole_indicator);
    --ms-avatarTextStyle_s_family: var(--ms-textStyle_labelS_family);
    --ms-avatarTextStyle_s_size: var(--ms-textStyle_labelS_size);
    --ms-avatarTextStyle_s_lineHeight: var(--ms-textStyle_labelS_lineHeight);
    --ms-avatarTextStyle_s_weight: var(--ms-textStyle_labelS_weight);
    --ms-avatarTextStyle_m_family: var(--ms-textStyle_labelM_family);
    --ms-avatarTextStyle_m_size: var(--ms-textStyle_labelM_size);
    --ms-avatarTextStyle_m_lineHeight: var(--ms-textStyle_labelM_lineHeight);
    --ms-avatarTextStyle_m_weight: var(--ms-textStyle_labelM_weight);
    --ms-avatarTextStyle_l_family: var(--ms-textStyle_titleM_family);
    --ms-avatarTextStyle_l_size: var(--ms-textStyle_titleM_size);
    --ms-avatarTextStyle_l_lineHeight: var(--ms-textStyle_titleM_lineHeight);
    --ms-avatarTextStyle_l_weight: var(--ms-textStyle_titleM_weight);
    --ms-avatarTextStyle_xl_family: var(--ms-textStyle_headlineM_family);
    --ms-avatarTextStyle_xl_size: var(--ms-textStyle_headlineM_size);
    --ms-avatarTextStyle_xl_lineHeight: var(--ms-textStyle_headlineM_lineHeight);
    --ms-avatarTextStyle_xl_weight: var(--ms-textStyle_headlineM_weight);
  }

  /* Avatar */
  .ms-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--_ms-avatarSize_m);
    block-size: var(--_ms-avatarSize_m);
    overflow: hidden;
    border-radius: var(--ms-avatarRadius);
    background: var(--ms-color_main);
    color: var(--ms-color_onMain);
    font-family: var(--ms-avatarTextStyle_m_family); font-size: var(--ms-avatarTextStyle_m_size); line-height: var(--ms-avatarTextStyle_m_lineHeight); font-weight: var(--ms-avatarTextStyle_m_weight);
    text-transform: uppercase;
    vertical-align: middle;
  }
  .ms-avatar[data-ms-size="s"] { inline-size: var(--_ms-avatarSize_s); block-size: var(--_ms-avatarSize_s); font-family: var(--ms-avatarTextStyle_s_family); font-size: var(--ms-avatarTextStyle_s_size); line-height: var(--ms-avatarTextStyle_s_lineHeight); font-weight: var(--ms-avatarTextStyle_s_weight); }
  .ms-avatar[data-ms-size="l"] { inline-size: var(--_ms-avatarSize_l); block-size: var(--_ms-avatarSize_l); font-family: var(--ms-avatarTextStyle_l_family); font-size: var(--ms-avatarTextStyle_l_size); line-height: var(--ms-avatarTextStyle_l_lineHeight); font-weight: var(--ms-avatarTextStyle_l_weight); }
  .ms-avatar[data-ms-size="xl"] { inline-size: var(--_ms-avatarSize_xl); block-size: var(--_ms-avatarSize_xl); font-family: var(--ms-avatarTextStyle_xl_family); font-size: var(--ms-avatarTextStyle_xl_size); line-height: var(--ms-avatarTextStyle_xl_lineHeight); font-weight: var(--ms-avatarTextStyle_xl_weight); }
  .ms-avatar:has(> img) { background: var(--ms-color_mantle); }
  .ms-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ms-avatar[data-ms-size="l"] > .ms-icon { inline-size: var(--ms-iconSize_l); block-size: var(--ms-iconSize_l); }
  .ms-avatar[data-ms-size="xl"] > .ms-icon { inline-size: var(--ms-iconSize_xl); block-size: var(--ms-iconSize_xl); }
}