/* Buttons */
button {
  cursor:pointer;
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.primary,.outline,.smallbutton {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--radius);
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.primary {
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent-hover);
  padding:10px 18px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
  &:hover:not(:disabled) {
    background:var(--accent-hover);
  }
  &:active:not(:disabled) {
    box-shadow:none;
    transform:translateY(1px);
  }
}
.outline {
  background:var(--surface);
  border:1px solid var(--line-strong);
  color:var(--ink);
  padding:9px 16px;
  &:hover:not(:disabled) {
    border-color:var(--line-hover);
    background:var(--panel);
  }
}
.smallbutton {
  background:var(--surface);
  border:1px solid var(--line-strong);
  color:var(--ink);
  padding:6px 12px;
  font-size:14px;
  font-weight:500;
  &:hover:not(:disabled) {
    border-color:var(--line-hover);
    background:var(--panel);
  }
}
.textlink {
  color:var(--ink);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--line-hover);
  text-underline-offset:3px;
  &:hover {
    text-decoration-color:currentColor;
  }
}