import { createMuiTheme } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/red';

// Create a theme instance.
const theme = createMuiTheme({

  // COLORS
  palette: {
    primary: {
      main: '#1689FB',
      darkMain: '#155EE4',
      dark: '#1E2327',
      important: '#25D89A',
      conditional: '#D2D3D3',
    },
    secondary: {
      main: '#FFFFFF',
      dark: '#BBBCBD',
      important: '#FF5A5F',
      text: '#787B7D',
    },
    error: {
      main: red.A400,
    },
    offerlistitem: {
      title: '#1E2327',
      icon: '#BBBCBD',
      text: '#787B7D',
    },
    answer: {
      main: '#E8E8E8',
    },
    background: {
      default: '#ffffff',
      grid: '#FCFCFC',
      dark: '#1E2327',
      grey: '#F3F9FF',
      videotheque: '#54D7E6',
      blog: '#1689FB',
      recruteur: '#1E2327',
    },
    menu: {
      darkText: '#1E2327',
      lightText: '#F3F9FF',
      darkDivider: '#32383C',
      lightDivider: '#E2E2E2',
      backArrow: 'rgba(30, 35, 39, 0.4)',
      emailText: '#E8E8E9'
    },
    tags: {
      main: '#E7F3FF',
    },
    input: {
      main: '#F0F0F0',
    },
    authSocial: {
      facebook: '#3064B7',
      facebookDark: '#2C59A0',
      linkedin: '#0276B5',
      linkedinDark: '#025C8D',
    },
    social: {
      facebook: '#334F8D',
      twitter: '#1A97F0',
      linkedin: '#006CAC',
      mail: '#BBBCBD',
    }
  },


  //OVERRIDE
  overrides: {

    MuiDrawer: {
      paperAnchorLeft: {
        right: '25%',
        backgroundColor: '#1E2327',
      },
      paperAnchorRight: {
        left: '25%',
        backgroundColor: '#1E2327',
      }
    },

    MuiAppBar: {
      colorPrimary: {
        color: '#1689FB',
        backgroundColor: '#FFFFFF',
      },
      colorDefault: {
        boxShadow: 'none',
        backgroundColor: '#F8FBFF',
      }
    },

    MuiPaper: {
      elevation1: {
        boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
        transition: 'box-shadow 2s',
        '&:hover': {
          boxShadow: '0px 6px 16px rgba(35, 40, 45, 0.25)',
          transition: 'box-shadow 1.2s',
        }
      },
      elevation4: {
        transition: 'box-shadow .25s',
        boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
      },
    },

    MuiButton: {
      root: {
        '&:hover': {
          backgroundColor: 'none',
        },
        '&:active': {
          boxShadow: '0px',
        },
      },

      contained: {
        boxShadow: '0px',
        '&:hover': {
          backgroundColor: 'none',
        },
        '&:active': {
          boxShadow: '0px',
        },
      },
      outlined: {
        border: '2px solid',
        '&:hover': {
          backgroundColor: 'none',
        },
        '&:active': {
          boxShadow: '0px',
        },
      },
      outlinedPrimary: {
        border: '2px solid',
        borderColor: '#1689FB',
        '&:hover': {
          border: '2px solid',
        },
      },
      outlinedSecondary: {
        border: '2px solid',
        borderColor: '#FFFFFF',
        '&:hover': {
          border: '2px solid',
        },
      }
    },

    MuiButtonGroup: {
      contained: {
        boxShadow: 'inherit',
      },
    },

    MuiLink: {
      underlineHover: {
        '&:hover': {
          textDecoration: 'none',
        },
      }
    },

    MuiCheckbox: {
      colorSecondary: {
        '&.Mui-checked': {
          color: "#1689FB",
        }

      }
    },

    MuiFilledInput: {
      underline: {
        '&:before, &:after': {
          display: 'none',
        },
      }
    },
  },
});

export default theme;