@keyframes pulse {
  0% { opacity: .25; }
  25% { opacity: .25; }
  35% { opacity: 1; }
  55% { opacity: 1; }
  75% { opacity: .25; }
  100% { opacity: .25; }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.timer {
  cursor: pointer;
  height: 30px;
  min-width: 85px;
  outline: none;
  position: relative;
  text-decoration: none;
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1),
    border-color .35s cubic-bezier(.4, 0, .2, 1);
}

.timer:not(.is-running) {
    background-color: rgba(130, 130, 140, 0.12);
    border: 1px solid rgba(130, 130, 140, 0.12);
  }

.timer:not(.is-running):focus {
      background-color: rgba(130, 130, 140, 0.12);
      border-color: rgba(130, 130, 140, 0.24);
      box-shadow: 0 0 0 1px rgba(130, 130, 140, 0.24);
    }

.timer:not(.is-running):hover {
      background-color: rgba(130, 130, 140, 0.18);
    }

.timer:not(.is-running):active {
      box-shadow: inset 0 2px 3px rgba(130, 130, 140, 0.12);
      background-color: rgba(130, 130, 140, 0.18);
    }

.timer.is-running {
    background-color: rgba(19, 10, 191, 0.12);
    border: 1px solid rgba(19, 10, 191, 0.12);
  }

.timer.is-running:focus {
      background-color: rgba(19, 10, 191, 0.12);
      border-color: rgba(19, 10, 191, 0.24);
      box-shadow: 0 0 0 1px rgba(19, 10, 191, 0.24);
    }

.timer.is-running:hover {
      background-color: rgba(19, 10, 191, 0.18);
    }

.timer.is-running:active {
      box-shadow: inset 0 2px 3px rgba(130, 130, 140, 0.12);
      background-color: rgba(19, 10, 191, 0.18);
    }
