/* ==========================================================================
   Button — Carbon primary / ghost buttons
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cds-spacing-03);
  min-height: 3rem;
  padding: 0 var(--cds-spacing-06);
  font-size: 0.875rem;
  line-height: 1.125rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--cds-radius);
  transition:
    background var(--cds-duration-fast) var(--cds-ease-productive),
    color var(--cds-duration-fast) var(--cds-ease-productive);
}

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

.button--primary {
  color: var(--cds-text-on-color);
  background: var(--cds-interactive);
}

.button--primary:hover {
  color: var(--cds-text-on-color);
  background: var(--cds-link-primary-hover);
}

.button--ghost {
  color: var(--cds-link-primary);
  background: transparent;
}

.button--ghost:hover {
  background: var(--cds-layer-hover);
}

.button--done {
  color: var(--cds-support-success);
  background: var(--cds-layer);
  border-color: var(--cds-support-success);
}