import { selectors } from '@defencedigital/design-tokens';
import styled from 'styled-components';
import { MAIN_HEIGHT } from './constants';
var color = selectors.color;
export var StyledOption = styled.button.withConfig({
  displayName: "StyledOption",
  componentId: "sc-1m9kkcp-0"
})(["display:flex;align-items:center;justify-content:center;height:", ";width:", ";margin:0;text-decoration:none;background-color:", ";border:none;cursor:pointer;&:focus{box-shadow:0 0 0 0.2rem rgba(", ",0.5);}> svg{fill:", ";}"], MAIN_HEIGHT, MAIN_HEIGHT, function (_ref) {
  var $isActive = _ref.$isActive;
  return color('neutral', $isActive ? '400' : 'white');
}, color('action', '700'), function (_ref2) {
  var $isActive = _ref2.$isActive;
  return color('neutral', $isActive ? 'white' : '400');
});