import {
  avenirHeavy,
  avenirHeavyObliquue,
  avenirMedium,
  avenirMediumObliquue,
  avenirRegular,
} from '../assets/fonts/avenir'
import {
  lightPoppins,
  mediumPoppins,
  regularPoppins,
  semiboldPoppins,
  lightPoppinsItalic,
  mediumPoppinsItalic,
  regularPoppinsItalic,
} from '../assets/fonts/poppins'

export const customCssBaseline = `
    :root{
      --toastify-color-info: #3498db;
      --toastify-color-success: #7EB872;
      --toastify-color-warning: #f1c40f;
      --toastify-color-error: #BC2C3D;
    }

    html, body {
      font-size: 14px;
      font-family: Avenir, sans-serif;
      font-weight: 400;
    }
    
    @font-face {
      font-family: Avenir;
      src: url(${avenirRegular}) format('truetype');
      font-display: swap;
      font-weight: 400;
    }
    @font-face {
      font-family: Avenir;
      src: url(${avenirMedium}) format('truetype');
      font-display: swap;
      font-weight: 500;
    }
    @font-face {
      font-family: Avenir;
      src: url(${avenirMediumObliquue}) format('truetype');
      font-display: swap;
      font-weight: 500;
      font-style: oblique;
    }
    @font-face {
      font-family: Avenir;
      src: url(${avenirHeavy}) format('truetype');
      font-display: swap;
      font-weight: 600;
    }
    @font-face {
      font-family: Avenir;
      src: url(${avenirHeavyObliquue}) format('truetype');
      font-display: swap;
      font-weight: 600;
      font-style: oblique;
    }

    @font-face {
      font-family: Poppins;
      src: url(${lightPoppins}) format('truetype');
      font-display: swap;
      font-weight: 300;
    }
    @font-face {
      font-family: Poppins;
      src: url(${lightPoppinsItalic}) format('truetype');
      font-display: swap;
      font-weight: 300;
      font-style: italic;
    }
    @font-face {
      font-family: Poppins;
      src: url(${regularPoppins}) format('truetype');
      font-display: swap;
      font-weight: 400;
    }
    @font-face {
      font-family: Poppins;
      src: url(${regularPoppinsItalic}) format('truetype');
      font-display: swap;
      font-weight: 400;
      font-style: italic;
    }
    @font-face {
      font-family: Poppins;
      src: url(${mediumPoppins}) format('truetype');
      font-display: swap;
      font-weight: 500;
    }
    @font-face {
      font-family: Poppins;
      src: url(${mediumPoppinsItalic}) format('truetype');
      font-display: swap;
      font-weight: 500;
      font-style: italic;
    }
    @font-face {
      font-family: Poppins;
      src: url(${semiboldPoppins}) format('truetype');
      font-display: swap;
      font-weight: 600;
    }

.Toastify__toast {
  border-radius: 5px;
  padding: 0;
}

.Toastify__toast-body {
  font-family: Poppins;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  font-weight: 600;
  padding: 0;
  margin: 0;
  height: 64px;
  align-items: stretch;
}
.Toastify__toast-body > div:last-child {
  align-self: center;
  margin-left: 30px;
}

.Toastify__toast > button > svg {
  display: none;
}
`
