@icoms-detection/ui/src/stitches/buttonGroup.ts

This is the OFFICIAL UI library created by Icoms Detection to design their apps.

const defaultStyleButton = {
  backgroundColor: "rgb(245, 245, 245)",
  border: "none",
  borderRight: "1px solid $colors$neutral_200",
  borderBottom: "1px solid $colors$neutral_200",
  borderTop: "1px solid $colors$neutral_200",
  padding: "0.5rem 0.75rem",
  cursor: "pointer",
  fontFamily: "$content",
  margin: 0,
  text: "xs",
  borderBox: "box-sizing",
  color: "$neutral_300",
  "&:first-child": {
    borderTopLeftRadius: "5px",
    borderBottomLeftRadius: "5px",
    borderLeft: "1px solid $colors$neutral_200",
  },
  "&:last-child": {
    borderTopRightRadius: "5px",
    borderBottomRightRadius: "5px",
    borderRight: "1px solid $colors$neutral_200",
  },
  "&:hover": {
    color: "$primary_500",
    border: "1px solid $colors$primary_500",
    marginLeft: "-1px",
  },
  "&:hover:first-child": {
    marginLeft: "0px",
  },
};

export const stitchesButtonStyles = {
  ...defaultStyleButton,
  variants: {
    selected: {
      true: {
        fontWeight: 900,
        backgroundColor: "$primary_200",
        color: "$primary_500",
        border: "1px solid $colors$primary_500",
        marginLeft: "-1px",
        "&:first-child": {
          marginLeft: "0px",
          borderLeft: "1px solid $colors$primary_500",
        },
        "&:last-child": {
          borderRight: "1px solid $colors$primary_500",
        },
      },
    },
  },
};

export const stitchesButtonGroupStyles = {
  width: "auto",
  maxWidth: "max-content",
  boxSizing: "border-box",
  display: "inline-block",
};