// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { keyframes, memoizeFunction } from '@fluentui/react';
/**
 * @private
 */
export const playFrames = memoizeFunction(() => keyframes({
    from: {
        backgroundPosition: '0px 8568px'
    },
    to: {
        backgroundPosition: '0px 0px'
    }
}));
/**
 * @param backgroundImage - the uri for the reaction emoji resource
 * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
 *
 * @private
 */
export const emojiStyles = (backgroundImage, frameCount) => {
    const imageResourceUrl = `url(${backgroundImage})`;
    const steps = frameCount !== null && frameCount !== void 0 ? frameCount : 51;
    return {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        width: '100%',
        backgroundImage: imageResourceUrl,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundSize: `2.75rem 133.875rem`,
        transition: 'opacity 2s',
        minWidth: '2.75rem',
        backgroundColor: 'transparent',
        transform: 'scale(0.6)',
        ':hover': {
            transform: 'scale(0.8)',
            animationName: playFrames(),
            animationDuration: '8.12s',
            animationTimingFunction: `steps(${steps})`,
            animationIterationCount: 'infinite',
            backgroundColor: 'transparent'
        },
        ':active': {
            backgroundColor: 'transparent'
        }
    };
};
/**
 *
 * @private
 */
export const reactionToolTipHostStyle = () => {
    return {
        root: {
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
            width: '2.75rem'
        }
    };
};
/**
 *
 * @private
 */
export const mobileViewMenuItemStyle = () => {
    return {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        width: '100%',
        height: '2.625rem'
    };
};
/**
 * @param backgroundImage - the uri for the reaction emoji resource
 * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
 *
 * @private
 */
export const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
    const imageResourceUrl = `url(${backgroundImage})`;
    return {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        width: '2.75rem',
        backgroundImage: imageResourceUrl,
        animationName: playFrames(),
        animationDuration: '8.12s',
        animationTimingFunction: `steps(102)`,
        animationPlayState: animationPlayState,
        animationIterationCount: 'infinite',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundPosition: 'center',
        backgroundSize: `2.75rem 133.875rem`,
        transition: 'opacity 2s',
        backgroundColor: 'transparent',
        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
    };
};
/**
 * @private
 */
export const reactionButtonStyles = (theme) => ({
    rootChecked: {
        background: theme.palette.themePrimary,
        color: theme.palette.white
    },
    rootCheckedHovered: {
        background: theme.palette.themePrimary,
        color: theme.palette.white
    },
    labelChecked: {
        color: theme.palette.white
    }
});
/**
 * @private
 */
export const reactionItemButtonStyles = {
    root: {
        border: 'none',
        height: '2.75rem',
        width: '2.75rem'
    }
};
/**
 * @private
 */
export const reactionButtonCalloutStyles = {
    container: {},
    root: {},
    beak: {},
    beakCurtain: {},
    calloutMain: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        width: '13.75rem',
        height: '2.625rem',
        // Ensure that when one emoji is hovered, the other emojis are partially faded out
        ':hover > :not(:hover)': {
            opacity: '0.5'
        }
    }
};
//# sourceMappingURL=ReactionButton.styles.js.map