/* The sidebar's "ارز‌های برتر" card.
   Values are the legacy `SymbolLatest.vue`'s scoped block, plus what the shared
   table stylesheet it pulls in contributes — measured off the rendered page,
   which is the only place the two are actually resolved together. */

.symbol-latest {
  width: 100%;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background-color: var(--gray-0);
}

.symbol-latest-title {
  padding-bottom: 16px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 700;
}

/* The 16px below is the legacy's own, and is the difference between a card that
   measures 528 and one that measures 512. */
.symbol-latest-table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
}

/* Rows and cells are flex here, not table boxes: the card is narrow and the
   three cells have to sit apart rather than share the width evenly. */
.symbol-latest-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.symbol-latest-cell {
  display: flex;
  align-items: center;
  padding: 12px 0;
}

/* --- The coin --- */

.symbol-latest-coin {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 20px on a phone and 25px from 1000px up, which is what the shared table
   stylesheet this card pulls in gives it. */
.symbol-latest-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* No gap: the legacy stacks the two names as plain block headings and the reset
   zeroes their margins, so they sit line-box against line-box. */
.symbol-latest-names {
  display: flex;
  flex-direction: column;
}

.symbol-latest-link,
.symbol-latest-en {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

/* One link covers the row; `position: relative` on the row is what gives this
   something to fill. */
.symbol-latest-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- Price --- */

/* A flex line does not break, so the price and its unit cannot be split across
   two lines however narrow the card gets. */
.symbol-latest-price {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.symbol-latest-quote {
  color: var(--gray-400);
}

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

/* Dropped below 600px: at that width the row has no room for a third cell, and
   the legacy hides it rather than wrapping. */
.symbol-latest-cell--change {
  display: none;
}

.symbol-latest-badge {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background-color: var(--profit-color);
  color: var(--success);
  font-size: 14px;
  font-weight: 400;
}

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

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

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

@media (min-width: 600px) {
  .symbol-latest-cell--change {
    display: flex;
  }
}

@media (min-width: 1000px) {
  .symbol-latest-icon {
    width: 25px;
    height: 25px;
  }
}