/*
 * /trade. One form: which way, how much, how tight. Colour, type and spacing come from /site/tokens.css only.
 */

.trade-form {
  display: grid;
  gap: var(--space-5);
  max-width: 34rem;
}

.trade-form .field {
  margin: 0;
}

/* The figures a quote gives, under the amount: what comes back, the fee, the least accepted. */
.quote {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  font-variant-numeric: tabular-nums;
}

.quote dt {
  opacity: 0.8;
}

.quote dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.quote .quote-main {
  font-weight: 700;
}

.slippage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.slippage .input-line {
  width: 7.5rem;
}