/* The asset's logo, the page's h1 and its ticker, over a rule.
   Values are the legacy `TradeLineChart.vue`'s `.symbol_details` block. */

/* No gap below on a phone — the legacy zeroes this at 1000px and down, and the
   prices that follow bring their own 24px of padding. */
.symbol-head {
  margin-bottom: 0;
}

.symbol-head-name {
  display: flex;
  align-items: center;
}

.symbol-head-icon {
  flex: none;
  width: 50px;
  height: 50px;
  margin-left: 16px;
  border-radius: 50%;
}

/* The legacy sets no colour here and lets the heading inherit the UA's, which on
   that site resolves to black. This app gives `body` a colour of its own, so
   inheriting would shift it to `--black` (#0f222a); the pure black the legacy
   draws is pinned instead, rather than the app's near-black. */
.symbol-head-title {
  color: #000;
  font-size: 21px;
  font-weight: 700;
}

/* Part of the heading line, not a paragraph after it — but grey and set apart,
   as the legacy draws it. The 5px is its `margin-right`, which in this RTL page
   is the gap after the name. */
.symbol-head-ticker {
  margin-right: 5px;
  color: var(--gray-500);
  font-weight: 700;
}

/* `#cbdae1` in the legacy, which is this app's `--gray-300`. */
.symbol-head-divider {
  width: 100%;
  margin: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--gray-300);
}

/* 1001, not 1000: the legacy drops the heading back to 21px on `max-width:
   1000px`, so at exactly 1000px it is still the phone size even though the page
   has already gone two-column. */
@media (min-width: 1001px) {
  .symbol-head {
    margin-bottom: 24px;
  }

  .symbol-head-title,
  .symbol-head-ticker {
    font-size: 24px;
  }
}