import { selectors } from '@defencedigital/design-tokens';
import styled, { css } from 'styled-components';
var color = selectors.color,
  fontSize = selectors.fontSize,
  spacing = selectors.spacing;
export var StyledCheckbox = styled.div.withConfig({
  displayName: "StyledCheckbox",
  componentId: "sc-156kala-0"
})(["display:inline-flex;position:relative;padding:", ";font-size:", ";user-select:none;cursor:pointer;*{cursor:pointer;}", " ", " ", " ", ""], function (_ref) {
  var $hasContainer = _ref.$hasContainer;
  return $hasContainer ? "0 0 0 ".concat(spacing('13')) : "0 0 0 ".concat(spacing('12'));
}, fontSize('base'), function (_ref2) {
  var $isInvalid = _ref2.$isInvalid;
  return $isInvalid && css(["border-color:", ";box-shadow:0 0 0 2px ", ";"], color('danger', '800'), color('danger', '800'));
}, function (_ref3) {
  var $hasContainer = _ref3.$hasContainer,
    $isChecked = _ref3.$isChecked;
  return $hasContainer && $isChecked && css(["background-color:", ";"], color('action', '000'));
}, function (_ref4) {
  var $hasContainer = _ref4.$hasContainer;
  return $hasContainer && css(["border:1px solid ", ";border-radius:15px;&:focus-within,&:active{outline:none;border-color:", ";box-shadow:0 0 0 2px ", ",0 0 0 5px ", ";}"], color('neutral', '200'), color('action', '500'), color('action', '500'), color('action', '100'));
}, function (_ref5) {
  var $isDisabled = _ref5.$isDisabled,
    $hasContainer = _ref5.$hasContainer;
  return $isDisabled && css(["cursor:not-allowed;*{cursor:not-allowed;}border-color:transparent;", " &:focus,&:active{border-color:transparent;box-shadow:none;}"], $hasContainer && css(["background-color:", ";"], color('neutral', '000')));
});