text: "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, -1, 'relative', 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