// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { controlBarContainerStyles } from './CallControls.styles';
const VIDEO_GALLERY_Z_INDEX = 1;
// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery
/** @private */
export const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;
// The notification container should be in the highest z-band to ensure it shows on top of all other content.
const NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;
/** @private */
export const DRAWER_Z_INDEX = NOTIFICATION_CONTAINER_Z_INDEX + 1;
/**
 * @private
 */
export const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {
    zIndex: CONTROL_BAR_Z_INDEX
});
const containerStyle = {
    width: '100%',
    position: 'relative',
    minHeight: '13rem' // linked to minimum space allocated to media gallery
};
/**
 * @private
 */
export const containerStyleDesktop = mergeStyles(Object.assign(Object.assign({}, containerStyle), { minWidth: '30rem' }));
/**
 * @private
 */
export const containerStyleMobile = mergeStyles(Object.assign(Object.assign({}, containerStyle), { minWidth: '17.5rem' }));
/**
 * @private
 */
export const galleryParentContainerStyles = (backgroundColor) => ({
    root: {
        zIndex: VIDEO_GALLERY_Z_INDEX,
        width: '100%',
        background: backgroundColor
    }
});
/**
 * @private
 */
export const mediaGalleryContainerStyles = {
    root: {
        height: '100%',
        width: '100%'
    }
};
/**
 * @private
 */
export const notificationsContainerStyles = {
    root: {
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        padding: '1rem',
        zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
        pointerEvents: 'none' // to allow the operation of controls underneath the notification container
    }
};
/**
 * @private
 */
export const bannerNotificationStyles = {
    root: {
        zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
        pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
    }
};
/**
 * @private
 */
export const notificationStackStyles = {
    root: {
        zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
        pointerEvents: 'auto',
        // to allow the dismissal or error and warning bars in the notification container,
        marginBottom: '0.5rem'
    }
};
/**
 * @private
 */
export const callArrangementContainerStyles = (verticalControlBar) => {
    return {
        root: {
            width: '100%',
            height: '100%',
            flexDirection: verticalControlBar ? 'unset' : 'column'
        }
    };
};
/**
 * @private
 */
export const verticalControlBarStyles = {
    root: {
        margin: 'auto'
    }
};
//# sourceMappingURL=CallPage.styles.js.map