"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../../Styling");
var Utilities_1 = require("../../../Utilities");
var styling_1 = require("@uifabric/styling");
exports.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[Styling_1.HighContrastSelector] = {
                        MsHighContrastAdjust: 'none'
                    },
                    _a["." + Utilities_1.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: styling_1.hiddenContentStyle
    };
};
//# sourceMappingURL=ColorRectangle.styles.js.map