"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Utilities_1 = require("../../Utilities");
var Styling_1 = require("../../Styling");
// Size breakpoint when the default border width changes from 2px to 4px.
var CELL_BORDER_BREAKPOINT = 24;
var LARGE_BORDER = 4;
var SMALL_BORDER = 2;
var DIVIDING_PADDING = 2;
var DEFAULT_CELL_SIZE = 20;
var cellHighContrastFocus = {
    left: -2,
    top: -2,
    bottom: -2,
    right: -2,
    border: 'none',
    outlineColor: 'ButtonText',
};
exports.getStyles = function (props) {
    var _a, _b, _c, _d, _e;
    var theme = props.theme, disabled = props.disabled, selected = props.selected, circle = props.circle, isWhite = props.isWhite, _f = props.height, height = _f === void 0 ? DEFAULT_CELL_SIZE : _f, _g = props.width, width = _g === void 0 ? DEFAULT_CELL_SIZE : _g, borderWidth = props.borderWidth;
    var semanticColors = theme.semanticColors, palette = theme.palette;
    var buttonBorderHovered = palette.neutralLighter;
    var buttonBorderChecked = palette.neutralLight;
    var buttonBorderCheckedHovered = palette.neutralSecondary;
    var buttonBorderIsWhite = palette.neutralTertiary;
    // If user provided a value, use it. If not, then we decide depending on the 24px size breakpoint.
    var calculatedBorderWidth = borderWidth
        ? borderWidth
        : width < CELL_BORDER_BREAKPOINT
            ? SMALL_BORDER
            : LARGE_BORDER;
    return {
        // this is a button that wraps the color
        colorCell: [
            Styling_1.getFocusStyle(theme, { inset: -1, position: 'relative', highContrastStyle: cellHighContrastFocus }),
            {
                backgroundColor: semanticColors.bodyBackground,
                padding: 0,
                position: 'relative',
                boxSizing: 'border-box',
                display: 'inline-block',
                cursor: 'pointer',
                userSelect: 'none',
                borderRadius: 0,
                border: 'none',
                height: height,
                width: width,
            },
            !circle && {
                selectors: (_a = {},
                    _a["." + Utilities_1.IsFocusVisibleClassName + " &:focus::after"] = {
                        // -1px so that we don't increase visually the size of the cell.
                        outlineOffset: calculatedBorderWidth - 1 + "px",
                    },
                    _a),
            },
            // In focus state for circle we want a round border which is not possible with outline.
            circle && {
                borderRadius: '50%',
                selectors: (_b = {},
                    _b["." + Utilities_1.IsFocusVisibleClassName + " &:focus::after"] = {
                        outline: 'none',
                        borderColor: semanticColors.focusBorder,
                        borderRadius: '50%',
                        left: -calculatedBorderWidth,
                        right: -calculatedBorderWidth,
                        top: -calculatedBorderWidth,
                        bottom: -calculatedBorderWidth,
                        selectors: (_c = {},
                            _c[Styling_1.HighContrastSelector] = {
                                outline: "1px solid ButtonText",
                            },
                            _c),
                    },
                    _b),
            },
            selected && {
                padding: DIVIDING_PADDING,
                border: calculatedBorderWidth + "px solid " + buttonBorderChecked,
                selectors: (_d = {},
                    _d['&:hover::before'] = {
                        content: '""',
                        height: height,
                        width: width,
                        position: 'absolute',
                        top: -calculatedBorderWidth,
                        left: -calculatedBorderWidth,
                        borderRadius: circle ? '50%' : 'default',
                        boxShadow: "inset 0 0 0 1px " + buttonBorderCheckedHovered,
                    },
                    _d),
            },
            !selected && {
                selectors: (_e = {},
                    _e['&:hover, &:active, &:focus'] = {
                        backgroundColor: semanticColors.bodyBackground,
                        padding: DIVIDING_PADDING,
                        border: calculatedBorderWidth + "px solid " + buttonBorderHovered,
                    },
                    _e['&:focus'] = {
                        borderColor: semanticColors.bodyBackground,
                        padding: 0,
                        selectors: {
                            ':hover': {
                                borderColor: theme.palette.neutralLight,
                                padding: DIVIDING_PADDING,
                            },
                        },
                    },
                    _e),
            },
            disabled && {
                color: semanticColors.disabledBodyText,
                pointerEvents: 'none',
                opacity: 0.3,
            },
            isWhite &&
                !selected && {
                // fake a border for white
                backgroundColor: buttonBorderIsWhite,
                padding: 1,
            },
        ],
        // the <svg> that holds the color
        svg: [
            {
                width: '100%',
                height: '100%',
            },
            circle && {
                borderRadius: '50%',
            },
        ],
    };
};
//# sourceMappingURL=ColorPickerGridCell.styles.js.map