Proyectos de Subversion LeadersLinked - SPA

import { styled } from '@mui/material'

const Button = styled('button', {
  overridesResolver: (props, styles) => [
    styles.root,
    props.variant === 'primary' && {
      backgroundColor: 'var(--button-bg)',
      color: 'var(--button-text-color)',
      border: '1px solid var(--button-bg)',
      '&:hover': {
        backgroundColor: 'var(--button-bg-hover)',
        color: 'var(--button-text-color-hover)'
      }
    },
    props.variant === 'secondary' && {
      background: 'var(--button-bg-secondary)',
      border: '1px solid var(--border-primary) ',
      color: 'var(--button-text-color-secondary)',
      '&:hover': {
        background: 'var(--button-bg-secondary-hover)',
        border: 'transparent'
      }
    },
    props.variant === 'tertiary' && {
      background: 'var(--button-bg-tertiary)',
      border: '1px solid #f4f4f4',
      color: 'var(--button-text-color-tertiary)',
      '&:hover': {
        background: '#d4d4d4',
        border: 'transparent',
        color: 'var(--button-text-color-tertiary)'
      }
    }
  ]
})(() => ({
  borderRadius: '30px',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '0.2rem 1rem',
  border: 'none',
  cursor: 'pointer',
  fontWeight: 600,
  fontSize: '0.9rem',
  display: 'inline-flex',
  overflow: 'hidden',
  textAlign: 'center',
  transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
  '&:hover': {
    backgroundColor: 'whitesmoke'
  },
  '&:disabled': {
    cursor: 'no-drop',
    backgroundColor: '#dddddd',
    color: '#a3a1a1'
  }
}))

export default Button