/*
  Needs to be nested to get a higher specificty
  than MUI icon button styles
 */
.root:global(.MuiIconButton-root) {
  grid-area: 1/1;
  align-self: end;
  justify-self: center;
  margin-bottom: 12px;
  width: 46px;
  height: 46px;

  &.countingDown {
    transition: border-color 300ms ease-in;
    border-color: transparent;
    pointer-events: none;
  }
}

.countingDown .icon {
  display: grid;
  place-content: center;
  animation: 4s linear -350ms forwards iconPulse;
  font-family: Gilroy, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;

  &::after {
    padding-top: 2px;
    animation:
      4s linear -350ms forwards countdown,
      4s linear -350ms forwards countdownPulse;
    content: '';
  }
}

@keyframes countdown {
  0% {
    animation-timing-function: step-end;
    content: '3';
  }

  45% {
    animation-timing-function: step-end;
    content: '2';
  }

  70% {
    animation-timing-function: step-end;
    content: '1';
  }
}

@keyframes countdownPulse {
  0% {
    opacity: 0;
  }

  20%,
  45%,
  70% {
    transform: scale(0.8);
    opacity: 0;
    animation-timing-function: ease;
  }

  25%,
  50%,
  75% {
    transform: scale(1.4);
    opacity: 1;
    animation-timing-function: ease;
  }

  30%,
  55%,
  80% {
    transform: scale(1);
  }

  40%,
  65%,
  85% {
    transform: scale(1);
    opacity: 1;
    animation-timing-function: ease-in;
  }

  95% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes iconPulse {
  20% {
    box-shadow: 0 0 24px 8px rgb(var(--mui-palette-primary-mainChannel) / 41%);
    animation-timing-function: ease;
  }

  45%,
  70% {
    box-shadow: 0 0 0 12.5px rgb(var(--mui-palette-primary-mainChannel) / 40%);
    animation-timing-function: ease;
  }

  25%,
  50%,
  75% {
    box-shadow: 0 0 8px 20px rgb(var(--mui-palette-primary-mainChannel) / 40%);
    animation-timing-function: ease;
  }

  30%,
  55%,
  80% {
    box-shadow: 0 0 0 12.5px rgb(var(--mui-palette-primary-mainChannel) / 40%);
  }

  95% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 12.5px rgb(var(--mui-palette-primary-mainChannel) / 40%);
    animation-timing-function: ease-in;
  }

  97.5% {
    box-shadow: 0 0 0 32px rgb(var(--mui-palette-primary-mainChannel) / 0%);
  }

  100% {
    transform: scale(10);
    opacity: 0;
  }
}
