@import '../../../common/variables';
@import './mixins';

.bcs-AvatarGroup {
    $avatar-spacing: 4px;

    display: flex;
    margin: 10px 0;

    .bcs-AvatarGroup-avatar {
        width: 32px;
        height: 32px;
    }

    .bcs-AvatarGroup-overflowCount {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: bold;
        background: $bdl-gray-62;
        border-radius: 100%;
        cursor: pointer;
    }

    .bcs-AvatarGroup-avatarContainer + .bcs-AvatarGroup-avatarContainer {
        margin-left: $avatar-spacing;
    }

    .bcs-AvatarGroup-overflowCountContainer {
        margin-left: $avatar-spacing;

        &:hover,
        &:active {
            margin-left: $avatar-spacing;
        }
    }
}

.bcs-AvatarGroup-listFlyout {
    width: 280px;
    max-width: 100%;

    .bcs-AvatarGroup-list {
        max-height: 215px;
        margin: 0;
        padding: 0;
        overflow: hidden auto;
        overflow-y: overlay; // nicer scroll bar for Blink engines only
    }

    .bcs-AvatarGroup-listTitle {
        margin: 0 0 12px 0;
        font-size: 15px;
    }

    .bcs-AvatarGroup-listItem {
        display: flex;
        align-items: center;
        margin: 6px 0 0 0;
        padding: 3px 0;

        .bcs-AvatarGroup-detailsStatus {
            color: $bdl-gray-62;
        }
    }

    .bcs-AvatarGroup-listItemAvatar {
        margin-right: 10px;
    }

    .bcs-AvatarGroup-listItemDetails {
        line-height: 16px;
    }

    .bcs-AvatarGroup-listItemStatus {
        color: $bdl-gray-62;
    }

    .bcs-AvatarGroup-tooltip {
        text-align: center;

        .bcs-AvatarGroup-detailsName {
            font-weight: bold;
        }
    }
}

// rules used in both .bcs-AvatarGroup and .bcs-AvatarGroup-listFlyout
.bcs-AvatarGroup-statusIcon {
    @include avatar-badge-icon;
}

.bcs-AvatarGroup-avatarContainer {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
}