@import '~theme/globals.scss';

:host {
    position: relative;
    width: var(--core-avatar-size);
    height: var(--core-avatar-size);
    padding: 0px;
    --contact-status-size: 14px;
    --margin-end-on-item: 8px;
    --margin-vertical-on-item: 8px;
    --userpicture-padding: 0px;

    img.userpicture {
        border-radius: var(--core-avatar-radius);
        width: var(--core-avatar-size);
        height: var(--core-avatar-size);
        max-width: var(--core-avatar-size);
        max-height: var(--core-avatar-size);
        padding: var(--userpicture-padding);
        &[alt] {
            text-indent: -999999px;
            white-space: nowrap;
            overflow: hidden;
        }
        &:not([src]),
        &[src=""] {
            visibility: visible;
            display: inline-block;
            position: relative;
            margin: var(--userpicture-padding);
            width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
            height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
            &:after {
                border-radius: var(--core-avatar-radius);
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: url('/assets/img/user-avatar.png');
                background-size: contain;
                content: "";
            }
        }
    }

    &.core-bar-button-image {
        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%;
        display: block;

        img {
            border-radius: 50%;
        }
    }

    .contact-status {
        position: absolute;
        right: 0;
        bottom: 0;
        width: var(--contact-status-size);
        height: var(--contact-status-size);
        border-radius: 50%;
        &.online {
            border: 1px solid white;
            background-color: var(--core-online-color);
        }
    }

    .userinitials {
        background-color: var(--gray-200);
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--core-avatar-radius);
        color: var(--gray-800);
        font-weight: normal;
        width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
        height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
        font-size: calc(var(--core-avatar-size)*0.3);
        margin: var(--userpicture-padding);
    }

    &.large-avatar .userinitials {
        margin-top: 8px;
    }
}

:host-context(.toolbar) .contact-status {
    width: 10px;
    height: 10px;
}

:host-context([dir="rtl"]) .contact-status {
    left: 0;
    right: unset;
}

:host-context(ion-item) {
    @include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px);
    img {
        min-width: var(--core-avatar-size);
        min-height: var(--core-avatar-size);
    }
}