// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, mergeStyles } from '@fluentui/react';
import { CHAT_CONTAINER_MIN_WIDTH_REM } from '../constants';
const SIDE_PANE_PADDING_LR_REM = 0.25;
/**
 * @private
 */
export const mobilePaneStyle = {
    root: {
        width: '100%',
        height: '100%'
    }
};
/**
 * @private
 */
export const hiddenMobilePaneStyle = concatStyleSets(mobilePaneStyle, {
    root: {
        display: 'none'
    }
});
/**
 * @private
 */
export const mobilePaneControlBarStyle = {
    root: {
        height: '3rem'
    }
};
/**
 * @private
 */
export const mobilePaneBackButtonStyles = {
    root: {
        border: 'none',
        minWidth: '2.5rem',
        maxWidth: '2.875rem',
        height: '100%',
        background: 'none',
        padding: '0 1rem'
    },
    rootChecked: {
        background: 'none'
    },
    rootCheckedHovered: {
        background: 'none'
    }
};
/**
 * @private
 */
export const mobilePaneHiddenIconStyles = concatStyleSets(mobilePaneBackButtonStyles, {
    root: {
        visibility: 'hidden'
    }
});
/**
 * @private
 */
export const mobilePaneButtonStyles = {
    root: {
        border: 'none',
        borderBottom: '0.125rem solid transparent',
        width: '8rem',
        height: '100%',
        background: 'none',
        padding: '0'
    },
    rootChecked: {
        background: 'none'
    },
    rootCheckedHovered: {
        background: 'none'
    },
    flexContainer: {
        flexFlow: 'column',
        display: 'contents'
    },
    label: {
        fontSize: '1rem',
        fontWeight: 100,
        lineHeight: '2rem',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
    },
    labelChecked: {
        fontWeight: 600
    }
};
/**
 * @private
 */
export const hiddenStyles = {
    root: {
        display: 'none'
    }
};
/**
 * @private
 */
export const sidePaneStyles = (maxWidth, minWidth) => ({
    root: {
        height: 'auto',
        width: '100%',
        padding: `0.5rem ${SIDE_PANE_PADDING_LR_REM}rem`,
        maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '21.5rem',
        minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : `${CHAT_CONTAINER_MIN_WIDTH_REM + SIDE_PANE_PADDING_LR_REM * 2}rem`
    }
});
/**
 * @private
 */
export const availableSpaceStyles = {
    root: {
        width: '100%',
        height: '100%'
    }
};
/**
 * @private
 */
export const sidePaneTokens = {
    childrenGap: '0.5rem'
};
/** @private */
export const paneHighContrastStyles = (theme) => mergeStyles({
    '@media (forced-colors: active)': {
        border: `0.125rem solid ${theme.palette.black}`,
        borderRadius: theme.effects.roundedCorner4,
        margin: '0.5rem 0.25rem 0.5rem 0rem'
    }
});
//# sourceMappingURL=Pane.styles.js.map