/*
  Component — Index Ticker
  ─────────────────────────
  Horizontal auto-scrolling strip of market indices.
  Sits below the account card.
*/

.index-ticker {
  padding: var(--space-3) 0 0;
}

/* ── Card ─────────────────────────────────────────── */
.index-ticker__card {
  height: 44px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ── Scrolling track ──────────────────────────────── */
.index-ticker__track-wrap {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: var(--space-4);

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 94%,
    transparent 100%
  );
}

.index-ticker__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: index-scroll 24s linear infinite;
}

.index-ticker__track:hover {
  animation-play-state: paused;
}

/* ── Index item ───────────────────────────────────── */
.index-ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding-right: 32px;
}

.index-ticker__item + .index-ticker__item::before {
  content: '|';
  margin-right: 32px;
  color: var(--color-border);
  font-weight: var(--font-weight-regular);
}

.index-ticker__name {
  font-size: 16px;
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
}

.index-ticker__value {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.index-ticker__change {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
}

.index-ticker__change.is-up   { color: var(--color-up); }
.index-ticker__change.is-down { color: var(--color-down); }
.index-ticker__change.is-flat { color: var(--color-flat); }

/* ── Animation ────────────────────────────────────── */
@keyframes index-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}