/* The heading block, from the legacy `SymbolLineChart.vue`'s `#assets_chart`
   styles — the price page prints its figure in the heading rather than in the
   three boxes the buy page uses below the chart. */

/* The legacy's `.symbol_details`: a column, and the 24px that separates the
   whole block from the range buttons under it. */
.symbol-price-head {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-bottom: 24px;
}

.symbol-price-head-name {
  display: flex;
  justify-content: start;
  align-items: center;
}

/* 16px on the logo's inline-start edge, which in an RTL document is its left —
   the legacy writes it as `margin-left` for the same reason. */
.symbol-price-head-icon {
  width: 50px;
  height: 50px;
  margin-inline-end: 16px;
  border-radius: 50%;
  flex: none;
}

.symbol-price-head-title {
  display: flex;
  align-items: center;
  color: var(--gray-900);
  font-size: 21px;
  font-weight: 700;
}

/* The ticker is part of the heading line rather than a paragraph of its own, so
   a screen reader announces the name and then the code as one thing. */
.symbol-price-head-ticker {
  margin-inline-start: 5px;
  color: var(--gray-500);
  font-size: 21px;
  font-weight: 700;
}

.symbol-price-head-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--gray-300);
  margin: 16px 0;
}

.symbol-price-head-freshness {
  margin-bottom: 16px;
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
}

.symbol-price-head-amount {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.symbol-price-head-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-900);
  font-size: 29px;
  font-weight: 700;
}

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

/* The same badge the table and the top-list cards draw, at this page's size. */
.symbol-price-head-change {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px;
  border-radius: 8px;
  background-color: var(--profit-color);
  color: var(--success);
  font-size: 14px;
  font-weight: 400;
}

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

/* One glyph, turned over for a fall, taking its colour from the badge. */
.symbol-price-head-change[data-direction='down'] .symbol-price-head-arrow {
  transform: rotate(180deg);
}

/* The dollar line under the Toman figure: caption and value on one row, the
   caption subdued. The legacy's `.dollar-value` / `.dollar-titr`. */
.symbol-price-head-dollar {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 400;
}

.symbol-price-head-dollar-title {
  color: var(--gray-500);
}

@media (min-width: 1001px) {
  .symbol-price-head-title,
  .symbol-price-head-ticker {
    font-size: 24px;
  }
}