import { position } from 'polished';
import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledCheckbox } from './StyledCheckbox';
var color = selectors.color;
function getCheckboxActiveStyle() {
  return css(["&::before{box-shadow:0 0 0 2px ", ";}"], color('action', '500'));
}
export var StyledCheckmark = styled.span.withConfig({
  displayName: "StyledCheckmark",
  componentId: "sc-kl7mli-0"
})(["display:block;position:relative;height:100%;width:100%;background-color:", ";border:1px solid ", ";border-radius:3px;&::before{content:'';", ";border-radius:2px;}&::after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPgogICAgPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMywgNCkiIGQ9Ik04LjgyMiAwYzEuMDUtLjAyNyAxLjU3NCAxLjMwNC44MjcgMi4wOEw0LjI5OCA3Ljc0YS44My44MyAwIDAgMS0xLjIwNyAwTC4zNzYgNC44NTVDLS43NTIgMy43MTguOTE0IDEuOTU2IDEuOTkgMy4xNDlsMS41MDggMS41OTVjLjEwNS4xMS4yODguMTEuNDA3IDBsNC4xMy00LjM3QTEuMSAxLjEgMCAwIDEgOC44MjMgMHoiCiAgICAgICAgICBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==);display:none;border-radius:2px;color:", ";}", " ", " input:checked ~ &{background-color:", ";border:1px solid ", ";text-align:center;&::after{display:block;}}", " input:disabled ~ &&{background-color:", ";border-color:", ";&::before{box-shadow:none;}}", " input:disabled:checked ~ &&{background-color:", ";}"], color('neutral', 'white'), color('neutral', '200'), position('absolute', 0, 0, 0, 0), color('neutral', 'white'), function (_ref) {
  var $hasContainer = _ref.$hasContainer;
  if ($hasContainer) {
    return css(["", ":hover &,", ":active &{", "}"], StyledCheckbox, StyledCheckbox, getCheckboxActiveStyle());
  }
  return css(["", ":hover &,", ":active &,", ":focus-within &{", "}"], StyledCheckbox, StyledCheckbox, StyledCheckbox, getCheckboxActiveStyle());
}, StyledCheckbox, color('action', '500'), color('action', '500'), StyledCheckbox, color('neutral', '000'), function (_ref2) {
  var $hasContainer = _ref2.$hasContainer;
  return color('neutral', $hasContainer ? '200' : '100');
}, StyledCheckbox, function (_ref3) {
  var $hasContainer = _ref3.$hasContainer;
  return color('neutral', $hasContainer ? '200' : '100');
});