/* Button feedback, the same in every app: the recruiter app, the console,
   sign-up, the apply funnel and the candidate app. Loaded by each layout after
   its own stylesheet, so these win at equal specificity. Tokens only: the
   pressed state darkens with a filter rather than a colour, so it is right on
   a teal primary, a paper secondary and in either theme. The busy state is set
   by busy.js. */

button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active,
.btn:not([aria-disabled="true"]):active,
[role="button"]:active {
  filter: brightness(0.9);
  transform: translateY(1px);
}

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button[aria-busy="true"],
input[aria-busy="true"],
.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

.busy-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .busy-spinner { display: none; }
}