// @keyframes overlayin {
//   from {
//     background-color: rgba(4, 4, 4, 0);
//   }
//   to {
//     background-color: rgba(4, 4, 4, .5);
//   }
// }
/* position: fixed; */
/* z-index: 60; */

/* animation-name: overlayin; */
/*
animation-direction: alternate;
animation-fill-mode: forwards;
animation-duration: 1s;
transition-property: background-color;
transition-timing-function: ease;
transition-duration: .5s;
background-color: rgba(4, 4, 4, .5);
*/

/* start hidden then show */
/* pointer-events: none; */
const OverlayTint = styled.div.className('overlay') `
  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(4, 4, 4, 0.4);

  min-height: 100vh;

  backface-visibility: hidden;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
`

export { OverlayTint }
export default OverlayTint