/* The price calculator.

   Values are the legacy `components/pages/trade/TradeCalc.vue`'s, with three
   deliberate departures, each noted where it happens: the card no longer forces
   a width wider than a 375px viewport, the unit label is centred rather than
   nudged to 29%, and the two hard-coded colours become tokens. */
.crypto-calc {
  display: flex;
  flex-direction: column;
  /* Only bites when the text column beside it is the taller of the two. */
  justify-content: center;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background-color: var(--gray-0);
}

.crypto-calc-title {
  margin-bottom: 16px;
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 700;
}

.crypto-calc-field {
  position: relative;
  margin-bottom: 16px;
}

.crypto-calc-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  background-color: transparent;
  color: var(--gray-900);
  font-size: 14px;
  /* The field holds Latin digits inside a right-to-left card; both settings are
     the legacy's, and together they keep the caret and the grouping where a
     Farsi reader expects them. */
  direction: rtl;
  text-align: right;
}

/* --- The asset the price is quoted in --- */

/* Physical `left`, not `inset-inline-end`: it is pinned opposite the field's
   right-aligned digits, and that pairing is what the RTL input above fixes. */
.crypto-calc-asset {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
}

.crypto-calc-asset-icon,
.crypto-calc-option-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.crypto-calc-asset-symbol {
  color: var(--gray-400);
  font-size: 12px;
}

/* The legacy draws this one glyph in pure black while every other icon on the
   page is a grey token — it would not survive a dark palette. */
.crypto-calc-asset-chevron {
  flex: none;
  color: var(--gray-900);
}

/* No flip while the list is open. The legacy chevron is a static mark — it has
   no state prop and no transform anywhere in the component — and an arrow that
   turns is a different affordance from one that does not. */

/* --- The list of assets --- */

/* `top: 100%` — directly under the field. The legacy writes `top: inherit`,
   which is not a length at all: it leaves the box at its static position, which
   lands in the same place by accident. */
.crypto-calc-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 175px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background-color: var(--gray-0);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
}

.crypto-calc-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  text-align: start;
}

.crypto-calc-option-name {
  color: var(--gray-900);
  font-size: 12px;
}

.crypto-calc-option-symbol {
  color: var(--gray-500);
}

.crypto-calc-option[aria-current='true'] {
  background-color: var(--gray-200);
}

/* --- The Toman amount --- */

/* Centred on the field rather than the legacy's `top: 29%`, a fraction that
   only lands right while the field is exactly 40px tall. */
.crypto-calc-unit {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 12px;
}

/* --- The buy button --- */

.crypto-calc-buy {
  display: block;
  width: 100%;
  padding: 6px 0;
  border-radius: 8px;
  /* `--success` and `--white`; the legacy hard-codes #408941 and #ffffff. */
  background-color: var(--success);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

/* The legacy pins the card at `min-width: 328px`, which is one pixel wider than
   a 375px viewport has room for and puts the whole page into horizontal
   overflow there. The width is asked for only where there is room for it. */
@media (min-width: 1000px) {
  .crypto-calc {
    width: 328px;
  }
}