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',
  },
})
