import { style } from "@vanilla-extract/css";

export const button = style({
  WebkitFontSmoothing: "antialiased",
  WebkitTapHighlightColor: "transparent",
  alignItems: "center",
  background: "#FFF",
  borderRadius: "5px",
  border: "1px solid #FFF",
  boxSizing: "border-box",
  colorScheme: "dark",
  color: "#000",
  cursor: "pointer",
  display: "flex",
  fontSize: "0.875rem",
  fontWeight: 500,
  font: "inherit",
  height: "40px",
  justifyContent: "center",
  lineHeight: "1.25em",
  margin: "0",
  maxWidth: "200px",
  minWidth: "200px",
  outline: "none",
  padding: "0 12px",
  position: "relative",
  textDecoration: "none",
  textSizeAdjust: "100%",
  transitionDuration: ".15s",
  transitionProperty: "border-color, background, color, box-shadow",
  transitionTimingFunction: "ease",
  userSelect: "none",
  verticalAlign: "baseline",
  ":hover": {
    boxShadow: "none",
    background: "transparent",
    color: "#FFF",
    border: "1px solid #FFF",
  },
});