import { HighContrastSelector } from '../../../Styling';
import { IsFocusVisibleClassName } from '../../../Utilities';
import { hiddenContentStyle } from '@fluentui/style-utilities';
export var getStyles = function (props) {
    var _a;
    var className = props.className, theme = props.theme, minSize = props.minSize;
    var palette = theme.palette, effects = theme.effects;
    return {
        root: [
            'ms-ColorPicker-colorRect',
            {
                position: 'relative',
                marginBottom: 8,
                border: "1px solid " + palette.neutralLighter,
                borderRadius: effects.roundedCorner2,
                minWidth: minSize,
                minHeight: minSize,
                outline: 'none',
                selectors: (_a = {},
                    _a[HighContrastSelector] = {
                        MsHighContrastAdjust: 'none',
                    },
                    _a["." + IsFocusVisibleClassName + " &:focus"] = {
                        outline: "1px solid " + palette.neutralSecondary,
                    },
                    _a),
            },
            className,
        ],
        light: [
            'ms-ColorPicker-light',
            {
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                // Intentionally DO NOT flip the color picker in RTL: its orientation is not very meaningful,
                // and getting all the math and styles flipped correctly is tricky
                background: 'linear-gradient(to right, white 0%, transparent 100%) /*@noflip*/',
            },
        ],
        dark: [
            'ms-ColorPicker-dark',
            {
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                background: 'linear-gradient(to bottom, transparent 0, #000 100%)',
            },
        ],
        thumb: [
            'ms-ColorPicker-thumb',
            {
                position: 'absolute',
                width: 20,
                height: 20,
                background: 'white',
                border: "1px solid " + palette.neutralSecondaryAlt,
                borderRadius: '50%',
                boxShadow: effects.elevation8,
                transform: 'translate(-50%, -50%)',
                selectors: {
                    ':before': {
                        position: 'absolute',
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        border: "2px solid " + palette.white,
                        borderRadius: '50%',
                        boxSizing: 'border-box',
                        content: '""',
                    },
                },
            },
        ],
        description: hiddenContentStyle,
    };
};
//# sourceMappingURL=ColorRectangle.styles.js.map