/* The tonal button: the supporting action of a block, in the account's soft tint ("Usar como resposta", "Conectar"). */
.cs-btn--tonal { background-color: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }
.cs-btn--tonal:hover { background-color: var(--ds-cta-soft-hover); }

/* v5: every text button is a pill; the secondary and the danger take the quiet fill with no outline, and hover deepens it. */
html[data-visual="v5"] .cs-btn:not(.cs-btn--icon) {
  border-radius: var(--ds-radius-full);
  padding-inline: 1rem;
  font-size: var(--ds-font-size-sm);
}

html[data-visual="v5"] .cs-btn--small:not(.cs-btn--icon) {
  padding-inline: 0.75rem;
  font-size: var(--ds-font-size-xs);
}

html[data-visual="v5"] .cs-btn--quiet:not(.cs-btn--icon, .cs-btn--small) { min-block-size: 2rem; }

/* The secondary action of a modal or a sheet (Alterar, Editar, Gerenciar, Adicionar…) is the small quiet one: ghost and
   small, in the regular weight, so it never weighs as much as the step's own content or its main action. */
html[data-visual="v5"] .cs-btn--ghost.cs-btn--small:not(.cs-btn--icon) { font-weight: var(--ds-weight-regular); }

html[data-visual="v5"] :is(.cs-btn--ghost, .cs-btn--danger):not(.cs-btn--icon) { border-color: transparent; background-color: var(--ds-fill); }
html[data-visual="v5"] .cs-btn--ghost:not(.cs-btn--icon) { color: var(--ds-on-cta-soft); }
html[data-visual="v5"] .cs-btn--danger:not(.cs-btn--icon) { color: var(--ds-negative); }

/* Small on the screen, but still a finger's 44 px to the touch: the target grows past the box, the box does not. */
@media (pointer: coarse) {
  html[data-visual="v5"] .cs-btn--small:not(.cs-btn--icon) { position: relative; }

  html[data-visual="v5"] .cs-btn--small:not(.cs-btn--icon)::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: max(100%, 44px);
    block-size: 44px;
    translate: -50% -50%;
  }
}

@media (any-hover: hover) {
  html[data-visual="v5"] :is(.cs-btn--ghost, .cs-btn--danger):not(.cs-btn--icon):hover { background-color: var(--ds-fill-hover); }
}

html[data-visual="v5"] .cs-btn:not(.cs-btn--icon):is(:disabled, [aria-disabled="true"], .cs-btn--disabled) {
  border-color: transparent;
  background-color: var(--ds-fill);
  color: var(--ds-text-muted);
}

/* The end of a page form: the small buttons on the right, the main one at the edge and Cancel beside it, right under the
   last field, no divider (the contact panel's step does the same). */
.ds-form-actions {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--ds-space-2);
}