import { keyframes, styled, css } from '@mui/material';

let _ = t => t,
  _t,
  _t2,
  _t3;
const pulsIn = keyframes(_t || (_t = _`
  0% {
    box-shadow: inset 0 0 0 1rem #fff;
    opacity: 1;
  }

  50%,
  100% {
    box-shadow: inset 0 0 0 0 #fff;
    opacity: 0;
  }
`));
const pulsOut = keyframes(_t2 || (_t2 = _`
  0%,
  50% {
    box-shadow: 0 0 0 0 #fff;
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 1rem #fff;
    opacity: 1;
  }
`));
const Loader = styled('div')(() => css(_t3 || (_t3 = _`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 89px;
    max-width: 89px;
    margin-top: 23px;
    margin-bottom: 40px;
    transform: rotate3d(21, 5, 13, 93deg);

    &::before,
    &::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      animation: ${0} 1.8s ease-in-out infinite;
    }

    &::before {
      width: 100%;
      padding-bottom: 100%;
      box-shadow: inset 0 0 0 1rem #fff;
      animation-name: ${0};
    }

    &::after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 #fff;
    }
  `), pulsOut, pulsIn));

export { Loader as default };
