/* Buttons (it-340). Links styled as buttons — every one on the site goes somewhere. Pills a control tall (a tap target
 * in the header), the icon after the label.
 */

.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mkt-space-2-5);
  min-height: var(--mkt-control);
  padding: 0 var(--mkt-space-7);
  border: 0;
  border-radius: var(--mkt-radius-pill);
  font-family: var(--mkt-font-body);
  font-size: var(--mkt-size-body);
  font-weight: var(--mkt-weight-semibold);
  line-height: var(--mkt-leading-title);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mkt-duration-fast) ease, color var(--mkt-duration-fast) ease, box-shadow var(--mkt-duration-fast) ease;
}

.mkt-btn .mkt-icon,
.mkt-arrow-link .mkt-icon {
  width: var(--mkt-icon-md);
  height: var(--mkt-icon-md);
  stroke-width: var(--mkt-stroke-bold);
}

.mkt-btn--primary {
  background: var(--mkt-purple);
  color: var(--mkt-surface);
}

.mkt-btn--primary:hover {
  background: var(--mkt-purple-hover);
  color: var(--mkt-surface);
}

.mkt-btn--outline {
  background: var(--mkt-surface);
  color: var(--mkt-ink);
  box-shadow: inset 0 0 0 var(--mkt-line-strong) var(--mkt-tint-deep);
}

.mkt-btn--outline:hover {
  background: var(--mkt-tint);
  color: var(--mkt-ink);
}

.mkt-btn--ink {
  background: var(--mkt-ink);
  color: var(--mkt-surface);
}

.mkt-btn--ink:hover {
  background: var(--mkt-purple);
  color: var(--mkt-surface);
}

/* On a dark ground. */
.mkt-btn--light {
  background: var(--mkt-surface);
  color: var(--mkt-ink);
  font-weight: var(--mkt-weight-bold);
}

.mkt-btn--light:hover {
  background: var(--mkt-tint-strong);
  color: var(--mkt-ink);
}

.mkt-btn--outline-light {
  background: transparent;
  color: var(--mkt-surface);
  box-shadow: inset 0 0 0 var(--mkt-line-strong) var(--mkt-edge-on-dark);
}

.mkt-btn--outline-light:hover {
  background: var(--mkt-veil-on-dark);
  color: var(--mkt-surface);
}

/* The header's size. */
.mkt-btn--sm {
  min-height: var(--mkt-tap);
  padding: 0 var(--mkt-space-5);
  font-size: var(--mkt-size-md);
}

/* A plain text link with a button's target size. */
.mkt-text-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--mkt-tap);
  padding: 0 var(--mkt-space-3-5);
  font-size: var(--mkt-size-md);
  font-weight: var(--mkt-weight-semibold);
  color: var(--mkt-ink);
  text-decoration: none;
}

.mkt-text-btn:hover,
.mkt-text-btn[aria-current='page'] {
  color: var(--mkt-purple);
}

/* A link with an arrow after it. */
.mkt-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mkt-space-2);
  font-weight: var(--mkt-weight-semibold);
}

.mkt-arrow-link .mkt-icon {
  transition: transform var(--mkt-duration-fast) ease;
}

.mkt-arrow-link:hover .mkt-icon {
  transform: translateX(var(--mkt-space-1));
}