/* The three price boxes.
   Values are the legacy `TradeLineChart.vue`'s `.symbol-detail-boxes` and the
   three box rules under it, which differ from each other only in class name. */

.symbol-prices {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
  width: 100%;
  padding: 24px 0;
}

/* The legacy writes this rule out three times, once per box, identical each
   time. `flex-wrap` with a full-width caption is what puts the figure on its own
   line under it. */
.symbol-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background-color: var(--gray-0);
}

.symbol-price-title {
  width: 100%;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 700;
}

/* A `dd` carries a UA `margin-inline-start` this design does not want; the
   global reset zeroes all margins, so nothing is needed here beyond the type. */
.symbol-price-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 700;
}

.symbol-price-unit {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
}

/* --- 24-hour change --- */

.symbol-price-change {
  display: flex;
  align-items: center;
}

/* Capped at 60px so the badge is the same width whatever the percentage
   measures, as the price table's is. 12px here, where the table's is 14. */
.symbol-change-badge {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  max-width: 60px;
  padding: 4px;
  border-radius: 8px;
  background-color: var(--profit-color);
  color: var(--success);
  font-size: 12px;
  font-weight: 400;
}

.symbol-change-badge[data-direction='down'] {
  background-color: var(--loss-color);
  color: var(--danger);
}

.symbol-change-arrow {
  flex: none;
}

.symbol-change-badge[data-direction='down'] .symbol-change-arrow {
  transform: rotate(180deg);
}

/* 1001, not 1000: the legacy stacks the price boxes under `max-width: 1000px`,
   so at exactly 1000px they are still one per row. */
@media (min-width: 1001px) {
  .symbol-prices {
    grid-template-columns: repeat(3, 1fr);
  }
}