var _COLOR_MAP, _SIZE_MAP;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { rgba } from 'polished';
import { BUTTON_ICON_POSITION, BUTTON_VARIANT } from '../constants';
import { COMPONENT_SIZE } from '../../Forms';
var color = selectors.color,
  spacing = selectors.spacing,
  fontSize = selectors.fontSize,
  shadow = selectors.shadow;
var DROP_SHADOW = "0 2px 6px ".concat(rgba(0, 0, 0, 0.3));
var TRANSPARENT_SHADOW = shadow('0');
var DEFAULT_HOVER_BORDER_SHADOW = "0 0 0 3px ".concat(color('action', '100'));
var DANGER_HOVER_BORDER_SHADOW = "0 0 0 3px ".concat(color('danger', '100'));
var COLOR_MAP = (_COLOR_MAP = {}, _defineProperty(_COLOR_MAP, BUTTON_VARIANT.PRIMARY, {
  color: color('neutral', 'white'),
  backgroundColor: color('action', '600'),
  borderColor: color('action', '800'),
  borderWidth: '2px',
  hoverBackgroundColor: color('action', '800'),
  hoverBoxShadow: DEFAULT_HOVER_BORDER_SHADOW,
  activeBackgroundColor: color('action', '900')
}), _defineProperty(_COLOR_MAP, BUTTON_VARIANT.SECONDARY, {
  color: color('action', '900'),
  backgroundColor: color('action', '100'),
  borderColor: color('action', '600'),
  borderWidth: '2px',
  hoverBackgroundColor: color('action', '200'),
  hoverBoxShadow: DEFAULT_HOVER_BORDER_SHADOW,
  activeBackgroundColor: color('action', '300')
}), _defineProperty(_COLOR_MAP, BUTTON_VARIANT.TERTIARY, {
  color: color('action', '600'),
  backgroundColor: color('neutral', 'white'),
  borderColor: color('action', '600'),
  borderWidth: '1px',
  hoverBackgroundColor: color('neutral', '000'),
  hoverBoxShadow: DEFAULT_HOVER_BORDER_SHADOW,
  activeBackgroundColor: color('neutral', '100')
}), _defineProperty(_COLOR_MAP, BUTTON_VARIANT.DANGER, {
  color: color('neutral', 'white'),
  backgroundColor: color('danger', '700'),
  borderColor: color('danger', '900'),
  borderWidth: '2px',
  hoverBackgroundColor: color('danger', '800'),
  hoverBoxShadow: DANGER_HOVER_BORDER_SHADOW,
  activeBackgroundColor: color('danger', '900')
}), _COLOR_MAP);
var SIZE_MAP = (_SIZE_MAP = {}, _defineProperty(_SIZE_MAP, COMPONENT_SIZE.FORMS, {
  height: '46px',
  fontSize: fontSize('m'),
  borderRadius: '15px'
}), _defineProperty(_SIZE_MAP, COMPONENT_SIZE.SMALL, {
  height: '33px',
  fontSize: fontSize('base'),
  borderRadius: '10px'
}), _SIZE_MAP);
export function getButtonStyles(_ref) {
  var $size = _ref.$size,
    $variant = _ref.$variant,
    _ref$$iconPosition = _ref.$iconPosition,
    $iconPosition = _ref$$iconPosition === void 0 ? BUTTON_ICON_POSITION.RIGHT : _ref$$iconPosition;
  return css(["height:", ";display:inline-flex;flex-direction:", ";align-items:center;justify-content:center;border-radius:", ";box-shadow:", ",", ";outline:0;padding:0 ", ";font-size:", ";font-weight:400;text-decoration:none;cursor:pointer;user-select:none;transition:all 75ms cubic-bezier(0,1.19,0.82,0.9);white-space:nowrap;&:hover{text-decoration:none;}&:active{box-shadow:", ",", ";}", " &:disabled{&,&:hover,&:active,&:focus{color:", ";background-color:", ";border:", " solid ", ";box-shadow:none;cursor:not-allowed;}}"], SIZE_MAP[$size].height, $iconPosition === BUTTON_ICON_POSITION.LEFT ? 'row-reverse' : 'row', SIZE_MAP[$size].borderRadius, TRANSPARENT_SHADOW, DROP_SHADOW, spacing('6'), SIZE_MAP[$size].fontSize, TRANSPARENT_SHADOW, TRANSPARENT_SHADOW, css(["color:", ";background-color:", ";border:", " solid ", ";&:focus,&:hover{background-color:", ";box-shadow:", ",", ";}&:active{background-color:", ";box-shadow:", ",", ";}"], COLOR_MAP[$variant].color, COLOR_MAP[$variant].backgroundColor, COLOR_MAP[$variant].borderWidth, COLOR_MAP[$variant].borderColor, COLOR_MAP[$variant].hoverBackgroundColor, COLOR_MAP[$variant].hoverBoxShadow, DROP_SHADOW, COLOR_MAP[$variant].activeBackgroundColor, TRANSPARENT_SHADOW, TRANSPARENT_SHADOW), color('neutral', '400'), color('neutral', '000'), COLOR_MAP[$variant].borderWidth, color('neutral', '200'));
}
export var StyledButton = styled.button.withConfig({
  displayName: "StyledButton",
  componentId: "sc-1jiux5u-0"
})(["position:relative;", ";"], getButtonStyles);