{"version":3,"file":"avatar.css.cjs","names":[],"sources":["../../../src/content/avatar/avatar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--avatar-bg, var(--_theme-backdrop, var(--color-contrast-200)));\n    --_color: var(--avatar-color, var(--_theme-base, var(--color-contrast-700)));\n    --_radius: var(--avatar-radius, var(--rounded-full));\n    --_font-weight: var(--avatar-font-weight, var(--font-semibold));\n    --_border: var(--avatar-border, none);\n    --_border-color: var(--avatar-border-color, var(--color-canvas));\n    --_size: var(--avatar-size, var(--size-10));\n    --_font-size: var(--avatar-font-size, var(--text-sm));\n\n    position: relative;\n    display: inline-flex;\n    flex-shrink: 0;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_size);\n    height: var(--_size);\n    overflow: hidden;\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1;\n    color: var(--_color);\n    text-transform: uppercase;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--_border);\n    border-color: var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  img[hidden] {\n    display: none;\n  }\n\n  .initials {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon-fallback {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--_color);\n    opacity: 0.6;\n  }\n\n  .status {\n    position: absolute;\n    inset-inline-end: 0;\n    bottom: 0;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--_border-color, var(--color-canvas));\n    border-radius: var(--rounded-full);\n  }\n\n  .status[data-status='online'] {\n    background: var(--color-success);\n  }\n\n  .status[data-status='offline'] {\n    background: var(--color-contrast-400);\n  }\n\n  .status[data-status='busy'] {\n    background: var(--color-error);\n  }\n\n  .status[data-status='away'] {\n    background: var(--color-warning);\n  }\n}\n\n/* forcedColorsMixin targets :host; avatar needs the border on .avatar (different geometry),\n     so forced-color rules are kept inline and unlayered to match mixin convention. */\n@media (forced-colors: active) {\n  .avatar {\n    forced-color-adjust: none;\n    border: 1px solid ButtonText;\n  }\n\n  .status {\n    background: Highlight;\n    border: 2px solid ButtonText;\n  }\n}\n"],"mappings":""}