import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
var animation = selectors.animation,
  color = selectors.color,
  spacing = selectors.spacing;
export var StyledButton = styled.button.withConfig({
  displayName: "StyledButton",
  componentId: "sc-16msh35-0"
})(["cursor:pointer;padding:", " ", ";outline:none;transition:all ", ";background-color:", ";color:", ";border:1px solid transparent;border-radius:4px;height:33px;width:33px;&:hover{", "}& > svg{position:relative;top:2px;left:-1px;}"], spacing('2'), spacing('4'), animation('default'), color('neutral', '000'), function (_ref) {
  var $isDisabled = _ref.$isDisabled;
  return color('neutral', $isDisabled ? '200' : '400');
}, function (_ref2) {
  var $isDisabled = _ref2.$isDisabled;
  return !$isDisabled && css(["background-color:", ";"], color('neutral', '100'));
});