/* The pill button and its variants. The round icon button lives with the application (flow.css). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font: 600 15px/1 var(--ui);
  background: var(--laurel);
  color: var(--on-laurel);
  transition: transform 120ms var(--ease), background-color 120ms var(--ease);
}
.btn:hover { background: #6FDDCB; }
.btn:active { transform: translateY(1px); }
.btn[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

.btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* on the Laurel ground of the last frame */
.btn-light {
  background: #fff;
  color: var(--night);
}
.btn-light:hover { background: var(--asphodel); }

.btn-ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* the "no" next to a main action */
.btn-quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--field-line);
}
.btn-quiet:hover { background: rgba(248, 247, 252, .07); }