@media (prefers-color-scheme: light) {
  .timer {
    --timer-controls-bg: #f5f5f5b3;
  }
}
[data-theme=light] {
  .timer {
    --timer-controls-bg: #f5f5f5b3;
  }
}

.timer {
  --timer-controls-bg: #151515b3;

  position: relative;
  user-select: none;
  -webkit-user-select: none;

  animation-iteration-count: 2;

  .timer-controls {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;

    display: none;
    background: var(--timer-controls-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  &:hover .timer-controls {
    display: block;
  }

  .timer-control {
    display: flex;
    justify-content: center;
    cursor: pointer;
    width: 100%;
  }
}

.timer--paused {
  animation: blink-animation 1s infinite;
}

.timer.sticky-ghost {
  --timer-controls-bg: #444444;
}

@keyframes blink-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: center;
  animation-name: swing;
  animation-duration: .3s;
}