import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
export const StyledButtonGroup = styled.div.withConfig({
  displayName: "Styles__StyledButtonGroup",
  componentId: "sc-1vw4iq2-0"
})(["", " ", " ", " button{&:disabled{opacity:1;color:var(--color-theme-500);pointer-events:none;}&:first-child:not(:last-child){svg{margin-right:-4px;}", " ", "}&:last-child:not(:first-child){svg{margin-left:-4px;}", " ", "}&:not(:first-child):not(:last-child){", " ", "}}svg{", "}"], {
  "display": "flex",
  "flexDirection": "row"
}, FontStyle, BoxSizingStyle, {
  "marginRight": "-1px",
  "borderTopRightRadius": "0px",
  "borderBottomRightRadius": "0px"
}, props => props.$invalid && css(["border-top-color:var(--red-alert) !important;border-bottom-color:var(--red-alert) !important;border-left-color:var(--red-alert) !important;"]), {
  "borderTopLeftRadius": "0px",
  "borderBottomLeftRadius": "0px"
}, props => props.$invalid && css(["border-top-color:var(--red-alert) !important;border-bottom-color:var(--red-alert) !important;border-right-color:var(--red-alert) !important;"]), {
  "marginRight": "-1px",
  "borderRadius": "0px"
}, props => props.$invalid && css(["border-top-color:var(--red-alert) !important;border-bottom-color:var(--red-alert) !important;"]), {
  "fill": "currentColor",
  "color": "var(--color-theme-900)"
});
StyledButtonGroup.displayName = "StyledButtonGroup";
//# sourceMappingURL=Styles.js.map