// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
const menuIconClass = 'ms-acs-participant-item-menu-icon';
/**
 * @private
 */
export const participantItemContainerStyle = (options, theme) => {
    return {
        paddingTop: '0.25rem',
        paddingBottom: '0.25rem',
        display: 'flex',
        maxWidth: '100%',
        minWidth: '8rem',
        cursor: !options.clickable ? 'default' : 'pointer',
        alignItems: 'center',
        ':focus-visible': {
            [` .${menuIconClass}`]: {
                display: 'flex'
            },
            outline: `0.1rem solid ${theme.palette.themePrimary}`
        }
    };
};
/**
 * @private
 */
export const displayNoneStyle = {
    display: 'none'
};
/**
 * @private
 */
export const menuButtonContainerStyle = {
    width: 'auto'
};
/**
 * @private
 */
export const participantStateMaxWidth = '5rem';
/**
 * @private
 */
export const participantStateStringStyles = {
    maxWidth: participantStateMaxWidth,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    lineHeight: 'normal',
    marginLeft: '0.5rem',
    marginRight: 0
};
/**
 * @private
 */
export const iconContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    height: '100%',
    paddingTop: '0.2rem'
};
/**
 * @private
 */
export const iconStyles = mergeStyles([menuIconClass, {
        display: 'flex',
        lineHeight: 0,
        // ensure the icon center is on the center line and not slightly above it
        alignItems: 'center'
    }]);
/**
 * @private
 */
export const meContainerStyle = {
    paddingRight: '0.5rem'
};
//# sourceMappingURL=ParticipantItem.styles.js.map