.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.fadeOutDelay {
  transition-delay: 0.5s;
}

.pointerCursor {
  cursor: pointer;
}

.hideCursor {
  cursor: none;
}

.button {
  composes: unstyledButton from '../../utils.module.css';
  background: var(--theme-big-play-pause-button-background, radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 60%));
  width: var(--theme-big-play-pause-button-size, 64px);
  height: var(--theme-big-play-pause-button-size, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation-duration: 0.7s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.button svg {
  fill: var(--theme-big-play-pause-button-icon-fill, #fff);
  width: var(--theme-big-play-pause-button-icon-size, 56px);
  height: var(--theme-big-play-pause-button-icon-size, 56px);
}

.hidden {
  opacity: 0;
}

.animated {
  animation-name: fadeOut;
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  0% {
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
  }
}
