/* usecases/styles.css */
:root {
  --color-stage: #4ade80;
  --color-commit: #38bdf8;
  --color-amend: #c4b5fd;
  --color-fail: #f472b6;
  --color-stash: #facc15;
  --color-conflict: #fb923c;
  --color-muted: #484f58;
  --color-cyan: #06b6d4;
  --color-purple: #8b5cf6;
  --color-pink: #d946ef;
  --color-rose: #f43f5e;
  --color-light-cyan: #67e8f9;
  --color-light-lavender: #c4b5fd;
}

.todo-item {
  transition: opacity .2s, background-color .2s;
}

.loading {
  opacity: .4;
}

@keyframes jiggle {
  0%, 100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-3px);
  }
}

.jiggle {
  animation: jiggle .3s ease-in-out;
}

input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.status-badge {
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
}

.status-badge--optimistic {
  color: var(--color-commit);
}

.status-badge--failed {
  color: var(--color-fail);
}

.status-badge--conflict {
  color: var(--color-conflict);
}

.status-badge--stashed {
  color: var(--color-stash);
}

.legend-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
}

.grad-h, .grad-v {
  background: linear-gradient(135deg, var(--color-cyan), var(--color-purple), var(--color-pink), var(--color-rose));
  opacity: .4;
  background-attachment: fixed;
  flex-shrink: 0;
}

.grad-h {
  height: 1px;
}

.grad-v {
  width: 1px;
}

.grad-wrap {
  position: relative;
}

.grad-wrap:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-cyan), var(--color-purple), var(--color-rose));
  opacity: .4;
  -webkit-mask: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  padding: 1px;
  inset: 0;
}