import { styled } from "../stitches.config";
import { StyledButton } from "./Button";

const ButtonGroup = styled("div", {
  display: "flex",
  marginLeft: "1px",
  [`& ${StyledButton}`]: {
    marginLeft: "-1px",
    px: "$4",
    zIndex: 2,
    position: "relative",
    "&:hover, &:focus": {
      zIndex: 200,
    },
  },
  [`& ${StyledButton}:not(:only-of-type):not(:first-child):not(:last-child)`]: {
    borderRadius: 0,
  },
  [`& ${StyledButton}:first-child:not(:only-of-type)`]: {
    borderBottomRightRadius: 0,
    borderTopRightRadius: 0,
  },
  [`& ${StyledButton}:last-child:not(:only-of-type)`]: {
    borderBottomLeftRadius: 0,
    borderTopLeftRadius: 0,
  },
});

export default ButtonGroup;