import { styled } from 'stitches.config'

const Button = styled('button', {
  outline: 'none',
  fontWeight: 700,
  fontSize: 16,
  fontFamily: '$button',
  transition: 'background-color 250ms linear, box-shadow 250ms ease-in-out',
  gap: '$space$2',
  display: 'inline-flex',
  alignItems: 'center',
  lineHeight: '20px',
  background: 'linear-gradient(to bottom, #f5f5f5 0%,#e1e1e1 50%,#f9f9f9 52%,#e1e1e1 100%)',
  boxShadow: '0 2px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.2)',
  border: '1px solid #ccc',
  '&:focus-visible': {
    boxShadow: '0 0 0 2px $$focusColor, 0 2px 5px rgba(0,0,0,0.3)',
  },
  '&:disabled': {
    backgroundColor: '#e0e0e0',
    color: '#a1a1a1',
    boxShadow: 'none',
  },
  '&:disabled:hover': {
    backgroundColor: '#e0e0e0',
    color: '#a1a1a1',
  },
  variants: {
    color: {
      primary: {
        backgroundColor: '$primary9',
        color: 'white',
        '&:hover': {
          background: 'linear-gradient(to top, #f5f5f5 0%,#e1e1e1 50%,#f9f9f9 52%,#e1e1e1 100%)',
          boxShadow: '0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.3)',
        },
      },
      secondary: {
        backgroundColor: '$secondary4',
        color: '$primary12',
        '&:hover': {
          background: 'linear-gradient(to top, #f5f5f5 0%,#e1e1e1 50%,#f9f9f9 52%,#e1e1e1 100%)',
          boxShadow: '0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.3)',
        },
      },
      ghost: {
        backgroundColor: 'transparent',
        p: 0,
      },
      gray3: {
        backgroundColor: '$gray3',
        color: '$gray12',
        '&:hover': {
          backgroundColor: '$gray4',
        },
      },
    },
    corners: {
      square: {
        borderRadius: 0,
      },
      rounded: {
        borderRadius: 8,
      },
      pill: {
        borderRadius: 99999,
      },
      circle: {
        borderRadius: '99999px',
        alignItems: 'center',
        justifyContent: 'center',
      },
    },
    size: {
      none: {},
      xs: {
        p: '$space$3',
        lineHeight: '16px',
        minHeight: 40,
      },
      small: {
        px: '$space$3',
        py: '$space$4',
        lineHeight: '12px',
        minHeight: 44,
      },
      medium: {
        px: '$space$5',
        py: '$space$3',
        minHeight: 44,
      },
      large: {
        px: '$space$5',
        py: '$space$4',
        minHeight: 52,
      },
    },
  },
  compoundVariants: [
    {
      size: 'xs',
      corners: 'circle',
      css: {
        height: 40,
        width: 40,
        p: 0,
      },
    },
    {
      size: 'small',
      corners: 'circle',
      css: {
        height: 44,
        width: 44,
        p: 0,
      },
    },
    {
      size: 'medium',
      corners: 'circle',
        css: {
          height: 44,
          width: 44,
          p: 0,
        },
      },
      {
        size: 'large',
        corners: 'circle',
        css: {
          height: 52,
          width: 52,
          p: 0,
        },
      },
  ],
  defaultVariants: {
    color: 'primary',
    corners: 'rounded',
    size: 'medium',
  },
})

export default Button