import styled, { css } from 'styled-components';
import { selectors } from '@defencedigital/design-tokens';
import { StyledWrapper } from '../../CheckboxRadioBase/partials/StyledWrapper';
import { StyledCheckbox } from '../../Checkbox/partials/StyledCheckbox';
import { StyledRadio } from '../../Radio/partials/StyledRadio';
import { StyledField } from '../../Field/partials/StyledField';
var color = selectors.color,
  spacing = selectors.spacing;
export var StyledFieldset = styled.fieldset.withConfig({
  displayName: "StyledFieldset",
  componentId: "sc-k1r1re-0"
})(["display:inline-flex;flex-direction:column;position:relative;padding:0 ", ";margin:", " 0;border:none;&:first-of-type{padding-left:0;}&:last-of-type{padding-right:0;}& + &{border-left:1px solid ", ";}", "{margin:6px 0;&:first-of-type{margin-top:0;}&:last-of-type{margin-bottom:0;}}", " ", "{margin-top:-1px;&:first-of-type{margin-top:0;}}", "{", ",", "{border-radius:0;border-bottom-width:1px;border-bottom-color:transparent;&:active,&:focus-within{z-index:1;border-color:", ";box-shadow:0 0 0 2px ", ",0 0 0 5px ", ";}}}", ":first-of-type{", ",", "{border-top-left-radius:15px;border-top-right-radius:15px;}}", ":last-of-type{", ",", "{border-bottom-left-radius:15px;border-bottom-right-radius:15px;border-bottom-color:", ";&:active,&:focus-within{border-color:", ";box-shadow:0 0 0 2px ", ",0 0 0 5px ", ";}}}", ""], spacing('8'), spacing('8'), color('neutral', '100'), StyledField, function (_ref) {
  var $type = _ref.$type;
  return $type === 'block' && "\n    &&& {\n      display: flex;\n      padding: 0;\n      border: none;\n      margin: 32px 0;\n    }\n  ";
}, StyledWrapper, StyledWrapper, StyledCheckbox, StyledRadio, color('action', '500'), color('action', '500'), color('action', '100'), StyledWrapper, StyledCheckbox, StyledRadio, StyledWrapper, StyledCheckbox, StyledRadio, color('neutral', '200'), color('action', '500'), color('action', '500'), color('action', '100'), function (_ref2) {
  var $isInvalid = _ref2.$isInvalid;
  return $isInvalid && css(["&::after{box-shadow:inset 0 0 0 1px ", ",0 0 0 2px ", ";border-radius:15px;content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;}", "{", ",", "{border-color:", ";box-shadow:none;border-right-color:transparent;border-left-color:transparent;}}", ":first-of-type{", ",", "{border-top-color:transparent;&:active,&:focus-within{border-top-color:", ";}}}", ":last-of-type{", ",", "{border-bottom-color:transparent;&:active,&:focus-within{border-bottom-color:", ";}}}"], color('danger', '800'), color('danger', '800'), StyledWrapper, StyledCheckbox, StyledRadio, color('neutral', '200'), StyledWrapper, StyledCheckbox, StyledRadio, color('action', '500'), StyledWrapper, StyledCheckbox, StyledRadio, color('action', '500'));
});