@import './styles';

.presence {
    position: relative;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
}

.presence-avatar-container {
    position: relative;

    &.dropdown-active {
        .bdl-PresenceAvatarList-count {
            color: $bdl-gray-80;
            background-color: $bdl-gray-30;
        }
    }
}

.presence-link-container {
    position: relative;
    display: inline-block;
}

.presence-avatar {
    position: relative;
    display: inline-block;
}

.presence-avatar.is-active::after {
    position: absolute;
    right: 0;
    bottom: 2px;
    display: block;
    box-sizing: content-box;
    width: 6px;
    height: 6px;
    background-color: $bdl-green-light;
    border: 2px solid $white;
    border-radius: 50%;
    content: '';
}

.presence-avatar-notehead {
    margin-right: 2px;
}

.presence-avatar-dropdown {
    vertical-align: sub;
}

.presence-notehead {
    width: $bdl-Presence-avatar-size;
    height: $bdl-Presence-avatar-size;

    &:hover {
        cursor: pointer;
    }
}

.presence-overlay {
    width: 275px;
}