/* ==========================================================================
 Buttons. One base, .btn, and its variants: primary (the action a form or
 dialog is for), secondary (cancel, reset, the quieter choices), danger
 (delete, disconnect). Each takes its colours from the theme's
 --button-* tokens. As tall as an input beside it: the same padding,
 line height and border.
========================================================================== */

.btn {
  align-items: center;
  background: var(--button-secondary-background);
  border: 1px solid var(--button-secondary-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--button-secondary-color);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  gap: 0.5rem;
  justify-content: center;
  line-height: var(--line-height);
  padding: 0.5rem 0.75rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn i {
  color: inherit;
}

.btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background: var(--button-primary-background);
  border-color: var(--button-primary-border);
  color: var(--button-primary-color);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--button-secondary-background);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-color);
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
  background: var(--button-danger-background);
  border-color: var(--button-danger-border);
  color: var(--button-danger-color);
}

/* Under the pointer each variant deepens a step towards its own rule */
.btn-primary:hover:not(:disabled) {
  background: color-mix(in oklab, var(--button-primary-background) 75%, var(--button-primary-border));
}

.btn-secondary:hover:not(:disabled) {
  background: color-mix(in oklab, var(--button-secondary-background) 75%, var(--button-secondary-border));
}

.btn-danger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--button-danger-background) 75%, var(--button-danger-border));
}

/* A quiet button in the badge colours (Disconnect): the red label's
   fill let through by the theme's --badge-fill as a pill's is, with its
   line and its ink; under the pointer a step towards the line */
.btn-red,
.btn-red:hover,
.btn-red:focus {
  --badge-bg: var(--label-red);
  --badge-line: var(--label-red-line);
  --badge-ink: var(--label-red-ink);

  background: color-mix(in oklch, var(--badge-bg) var(--badge-fill), transparent);
  border-color: var(--badge-line);
  color: var(--badge-ink);
}

.btn-red:hover:not(:disabled) {
  background: color-mix(in oklab, color-mix(in oklch, var(--badge-bg) var(--badge-fill), transparent) 75%, var(--badge-line));
}

.btn-sm {
  font-size: 0.875rem;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}

/* An icon that is a button: no fill, no rule, no padding */
.btn-icon {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* The add button at the far right of a card's toolbar (Add account, Add
   group): a bare plus in the link's dark lime, no fill and no rule */
.add-button {
  background: none;
  border: none;
  color: var(--link);
  cursor: pointer;
  line-height: 1;
  margin-left: auto;
  padding: 0.5rem;
}

.add-button i {
  font-size: 1.375rem;
}

.add-button:hover {
  color: var(--link-hover, var(--color-strong));
}

/* The close button in a dialog's header: a bare icon, muted until the
   pointer is on it */
.btn-close {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.25rem;
  justify-content: center;
  line-height: 1;
  padding: 0.25rem;
  transition: color 0.15s ease;
}

.btn-close:hover,
.btn-close:focus-visible {
  color: var(--color-accent);
}

/* A button that reads as a link */
.button-link {
  background: none;
  border: none;
  color: var(--link);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
}

.button-link:hover {
  color: var(--link-hover);
}


/* ==========================================================================
 Toolbar buttons: the square buttons in a card's toolbar (add, sync, more
 filters, a filter's dropdown), in the control colour, as tall as the
 inputs beside them. What is switched on, or a filter that is set, takes
 the selected colours.
========================================================================== */

.square-button {
  align-items: center;
  background: var(--background-control);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  gap: 0.5rem;
  line-height: 1.25;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.square-button:hover {
  color: var(--color-strong);
}

.square-button i {
  color: inherit;
  font-size: 1rem;
}

/* A dropdown's chevron, quieter than its label */
.square-button i.icon-chevron-down {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.square-button:disabled {
  cursor: default;
  opacity: 0.6;
}

.square-button.selected {
  background: var(--selected-background);
  border-color: var(--selected-border);
  color: var(--selected-color);
}

/* Square buttons side by side as one control (By Name | By Code) */
.btn-group {
  display: inline-flex;
}

.btn-group > .square-button {
  border-radius: 0;
}

.btn-group > .square-button + .square-button {
  border-left: none;
}

.btn-group > .square-button:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group > .square-button:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}


/* ==========================================================================
 Icon colours
========================================================================== */

.accent-link {
  color: var(--accent-link) !important;
}

.icon-yellow {
  color: var(--icon-yellow) !important;
}

.icon-violet {
  color: var(--icon-violet) !important;
}