import styled, { css } from "styled-components";
import { Badge } from "../Badge";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { Button } from "../Button/Button";
import { FontStyle } from "../FontStyle";
import { Body2 } from "../Typography/Variants/Body2";
export const StyledCounterButtonWrapper = styled.div.withConfig({
  displayName: "Styles__StyledCounterButtonWrapper",
  componentId: "sc-1ecrcba-0"
})(["", " ", " ", " width:fit-content;"], {
  "display": "flex"
}, FontStyle, BoxSizingStyle);
StyledCounterButtonWrapper.displayName = "StyledCounterButtonWrapper";
export const StyledCounterButton = styled(Button).withConfig({
  displayName: "Styles__StyledCounterButton",
  componentId: "sc-1ecrcba-1"
})(["", " ", " ", " ", ""], props => props.$active && !props.disabled && css(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]), props => props.$selected && css(["border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--color-primary-200);"]), props => !props.$selected && css(["@media (max-width:768px){width:32px;}"]), props => props.disabled && css(["pointer-events:none;opacity:0.5;"]));
StyledCounterButton.displayName = "StyledCounterButton";
export const StyledCounterButtonReset = styled(Button).withConfig({
  displayName: "Styles__StyledCounterButtonReset",
  componentId: "sc-1ecrcba-2"
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
export const StyledCounterButtonLabel = styled(Body2).withConfig({
  displayName: "Styles__StyledCounterButtonLabel",
  componentId: "sc-1ecrcba-3"
})(["", " @media (max-width:768px){display:none;}", ":hover &&{", "}", ""], {
  "pointerEvents": "none"
}, StyledCounterButton, props => !props.$active && css(["color:var(--color-theme-900);"]), props => props.$active && css(["color:var(--color-primary);"]));
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
export const StyledBadge = styled(Badge).withConfig({
  displayName: "Styles__StyledBadge",
  componentId: "sc-1ecrcba-4"
})(["margin-left:4px;margin-right:-6px;"]);
StyledBadge.displayName = "StyledBadge";
//# sourceMappingURL=Styles.js.map