:host {
    position: relative;

    .clickable {
        cursor: pointer;
    }
    img {
        border-radius: 50%;
        width: var(--core-avatar-size);
        height: var(--core-avatar-size);
        max-width: var(--core-avatar-size);
        max-height: var(--core-avatar-size);
    }
    img[core-external-content]:not([src]),
    img[core-external-content][src=""] {
        visibility: visible;
        display: inline-block;
        position: relative;
        &:after {
            border-radius: 50%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('/assets/img/user-avatar.png');
            background-size: contain;
            content: "";
        }
    }
    &.core-bar-button-image img {
        padding: 0;
        width: var(--core-header-toolbar-button-image-size);
        height: var(--core-header-toolbar-button-image-size);
        max-width: var(--core-header-toolbar-button-image-size);
        max-height: var(--core-header-toolbar-button-image-size);
        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;
}