@import '../../chat-tokens.scss';

:host {
    display: inline-block;
    color: $chat-status-color;
    height: $chat-window-nav-height;

    .status,
    .status-text {
        display: block;
        height: $chat-window-nav-height;
        line-height: $chat-window-nav-height;
        float: left;
    }
    .status {
        width: $chat-status-icon-size;
        padding: (($chat-window-nav-height / 2) - ($chat-status-icon-size / 2)) 0;
        margin-right: $chat-window-nav-hotizontal-padding;

        &::after {
            content: '';
            display: block;
            width: $chat-status-icon-size;
            height: $chat-status-icon-size;
            border-radius: $chat-status-icon-size;
        }

        &.active::after {
            background-color: $chat-status-icon-active-color;
        }

        &.not-available::after {
            background-color: $chat-status-icon-not-available-color;
        }
    }
}