define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.getStyles = function (props) {
        var className = props.className, theme = props.theme;
        return {
            root: [
                'ms-ColorPicker',
                theme.fonts.medium,
                {
                    position: 'relative',
                    maxWidth: 300
                },
                className
            ],
            panel: [
                'ms-ColorPicker-panel',
                {
                    padding: '16px'
                }
            ],
            table: [
                'ms-ColorPicker-table',
                {
                    tableLayout: 'fixed',
                    width: '100%',
                    selectors: {
                        'tbody td:last-of-type .ms-ColorPicker-input': {
                            paddingRight: 0
                        }
                    }
                }
            ],
            tableHeader: [
                theme.fonts.small,
                {
                    selectors: {
                        td: {
                            paddingBottom: 4
                        }
                    }
                }
            ],
            tableHexCell: [
                {
                    width: '25%'
                }
            ],
            colorSquare: [
                'ms-ColorPicker-colorSquare',
                {
                    width: 48,
                    height: 48,
                    margin: '0 0 0 8px',
                    border: '1px solid #c8c6c4'
                }
            ],
            flexContainer: [
                {
                    display: 'flex'
                }
            ],
            flexSlider: [
                {
                    flexGrow: '1'
                }
            ],
            flexPreviewBox: [
                {
                    flexGrow: '0'
                }
            ],
            input: [
                'ms-ColorPicker-input',
                {
                    width: '100%',
                    border: 'none',
                    boxSizing: 'border-box',
                    height: 30,
                    selectors: {
                        '&.ms-TextField': {
                            paddingRight: 4
                        },
                        '& .ms-TextField-field': {
                            minWidth: 'auto',
                            padding: 5,
                            textOverflow: 'clip'
                        }
                    }
                }
            ]
        };
    };
});
//# sourceMappingURL=ColorPicker.styles.js.map