// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { CHAT_CONTAINER_ZINDEX } from '../../ChatComposite/styles/Chat.styles';
/**
 * @private
 */
export const sidePaneContainerStyles = {
    root: {
        height: '100%',
        padding: '0.5rem 0.25rem',
        width: '21.5rem'
    }
};
/**
 * @private
 */
export const sidePaneContainerHiddenStyles = {
    root: Object.assign(Object.assign({}, sidePaneContainerStyles), { display: 'none' })
};
/**
 * @private
 */
export const sidePaneContainerTokens = {
    childrenGap: '0.5rem'
};
/**
 * @private
 */
export const sidePaneHeaderStyles = {
    root: {
        lineHeight: '1.5rem',
        fontSize: '1.125rem',
        padding: '0.75rem 0.75rem 0.75rem 0.25rem',
        fontWeight: '600'
    }
};
/**
 * @private
 */
export const sidePaneHeaderContainerStyles = {
    root: {
        margin: '0 0.25rem'
    }
};
/**
 * @private
 */
export const paneBodyContainer = {
    root: {
        flexDirection: 'column',
        display: 'flex'
    }
};
/**
 * @private
 */
export const scrollableContainer = {
    root: {
        flexBasis: '0',
        flexGrow: '1',
        overflowY: 'auto'
    }
};
/**
 * @private
 */
export const scrollableContainerContents = {
    root: {
        flexGrow: '1',
        flexBasis: '0',
        maxWidth: '100%',
        // Create a new stacking context so that `pipStyles` can set zIndex above the container.
        position: 'relative'
    }
};
/**
 * @private
 */
export const containerContextStyles = {
    root: {
        position: 'absolute',
        height: '100%',
        width: '100%'
    }
};
/**
 * @private
 */
export const peopleSubheadingStyle = {
    root: {
        fontSize: '0.75rem'
    }
};
/**
 * @private
 */
export const peoplePaneContainerTokens = {
    childrenGap: '0.5rem'
};
/**
 * @private
 */
export const participantListWrapper = (theme) => mergeStyles({
    width: '20rem',
    maxWidth: '50%',
    height: '100%',
    position: 'absolute',
    right: '0',
    boxShadow: theme.effects.elevation16,
    background: theme.semanticColors.bodyBackground,
    // zIndex to set the participant pane above the chat container
    zIndex: CHAT_CONTAINER_ZINDEX + 1
});
/**
 * @private
 */
export const participantListContainerPadding = {
    childrenGap: '0.5rem'
};
/**
 * @private
 */
export const participantListStack = mergeStyles({
    height: '100%'
});
/**
 * @private
 */
export const participantListContainerStyle = mergeStyles({
    height: '100%',
    overflowY: 'auto',
    overflowX: 'hidden'
});
/**
 * @private
 */
export const participantListStyle = {
    root: {
        padding: '0rem'
    },
    participantItemStyles: {
        root: {
            padding: '0.5rem'
        }
    }
};
/**
 * @private
 */
export const participantListMobileStyle = {
    root: {
        padding: '0rem'
    },
    participantItemStyles: {
        root: {
            padding: '0.5rem 1rem'
        }
    }
};
/**
 * @private
 */
export const displayNameStyles = {
    padding: '0.5rem',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap'
};
/**
 * @private
 */
export const headingMoreButtonStyles = (theme) => {
    return {
        root: {
            height: '100%',
            minWidth: '1.5rem',
            padding: '0.5rem 0.25rem',
            marginRight: '0.25rem',
            border: 'none',
            background: 'none'
        },
        rootHovered: {
            background: 'none'
        },
        rootPressed: {
            background: 'none'
        },
        rootFocused: {
            background: 'none'
        },
        icon: {
            color: theme.palette.neutralSecondary,
            display: 'flex',
            alignItems: 'center'
        }
    };
};
//# sourceMappingURL=ParticipantContainer.styles.js.map