:host { position: relative; cursor: pointer; img { border-radius: 50%; width: var(--core-avatar-size); height: var(--core-avatar-size); } &.core-bar-button-image img { padding: 0; width: var(--core-toolbar-button-image-width); height: var(--core-toolbar-button-image-width); max-width: var(--core-toolbar-button-image-width); border-radius: 50%; } .contact-status { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; &.online { border: 1px solid white; background-color: var(--core-online-color); } } .core-avatar-extra-icon { margin: 0 !important; border-radius: 0 !important; background: none; position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; } } :host-context(.toolbar) .contact-status { width: 10px; height: 10px; } :host-context([dir="rtl"]) .contact-status { left: 0; right: unset; }