import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledContainer } from './StyledContainer';
import { StyledSwitchOption } from './StyledSwitchOption';
import { StyledLegend } from './StyledLegend';
import { COMPONENT_SIZE } from '../../Forms';
var fontSize = selectors.fontSize,
  color = selectors.color;
export var StyledSwitch = styled.div.withConfig({
  displayName: "StyledSwitch",
  componentId: "sc-1jg4w69-0"
})(["position:relative;font-size:", ";", " ", " ", ""], fontSize('m'), function (_ref) {
  var $size = _ref.$size;
  return $size === COMPONENT_SIZE.SMALL && css(["&{font-size:", ";", "{height:33px;}", "{&:first-of-type{border-top-left-radius:10px;border-bottom-left-radius:10px;}&:last-of-type{border-top-right-radius:10px;border-bottom-right-radius:10px;}&:focus-within,&:active{box-shadow:0 0 0 1px ", ",0 0 0 3px ", ";}}}"], fontSize('s'), StyledContainer, StyledSwitchOption, color('action', '500'), color('action', '100'));
}, function (_ref2) {
  var $isDisabled = _ref2.$isDisabled;
  return $isDisabled && css(["", "{background-color:", ";}"], StyledContainer, color('neutral', '000'));
}, function (_ref3) {
  var $isInvalid = _ref3.$isInvalid;
  return $isInvalid && css(["&{", "{box-shadow:0 0 0 2px ", ";}", "{color:", ";}", "{border-top-color:", ";border-bottom-color:", ";&:first-of-type{border-left-color:", ";}&:last-of-type{border-right-color:", ";}&:focus-within,&:active{z-index:1;outline:none;border-color:", ";box-shadow:0 0 0 2px ", ",0 0 0 5px ", ";}}}"], StyledContainer, color('danger', '800'), StyledLegend, color('danger', '800'), StyledSwitchOption, color('danger', '800'), color('danger', '800'), color('danger', '800'), color('danger', '800'), color('action', '500'), color('action', '500'), color('action', '100'));
});