/*
 * Blueprint 08, "Components". 44 px high, radius 0, no shadow except the
 * focus ring, colour transitions 120 ms and nothing else.
 */

.base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--control-h);
  padding-inline: var(--s5);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  border: var(--hairline) solid transparent;
  cursor: pointer;
  transition:
    color var(--t-colour) linear,
    background-color var(--t-colour) linear,
    border-color var(--t-colour) linear;
}

/*
 * The one green element: the primary action. It uses --green-ink rather than
 * the ring's --green, because white on the ring green is only 2.9:1.
 */
.primary {
  background: var(--green-ink);
  border-color: var(--green-dark);
  color: #fff;
}

.primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

.secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

/* On the ink band the secondary button inverts. */
[data-surface="ink"] .secondary {
  border-color: var(--paper);
  color: var(--paper);
}

[data-surface="ink"] .secondary:hover {
  background: var(--paper);
  color: var(--ink);
}

.quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
}

.quiet:hover {
  border-color: var(--ink);
}

.full {
  width: 100%;
}

.base:disabled,
.base[aria-disabled="true"] {
  background: var(--paper-2);
  border-color: var(--rule);
  color: var(--muted);
  cursor: default;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

@media (max-width: 480px) {
  .row > * {
    flex: 1 1 100%;
  }
}