/*
 * DJ DIRT Hype Hover Preview
 * Prototype v1
 */

.hype-preview {
  position: fixed;
  z-index: 10000;

  width: min(320px, calc(100vw - 20px));
  box-sizing: border-box;

  padding: 15px 16px 12px;

  background: rgba(12, 12, 12, 0.98);
  color: #f4f4f4;

  border: 1px solid rgba(255, 255, 255, 0.20);
  border-top: 3px solid #d71920;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.34);

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-4px);

  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;

  pointer-events: none;
}

.hype-preview.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0);
}

.hype-preview.is-above {
  transform:
    translateY(0);
}

.hype-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 12px;
}

.hype-preview-heading {
  min-width: 0;
}

.hype-preview-name {
  overflow: hidden;

  color: #ffffff;

  font-size: 17px;
  font-weight: 800;
  line-height: 1.08;

  letter-spacing: -0.01em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.hype-preview-type {
  margin-top: 4px;

  color: #a7a7a7;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hype-preview-rank {
  flex: 0 0 auto;

  color: #d71920;

  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.hype-preview-score-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 8px;
}

.hype-preview-label,
.hype-preview-stat-label {
  display: block;

  color: #818181;

  font-size: 8px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.12em;
}

.hype-preview-score {
  margin-top: 3px;

  color: #ffffff;

  font-size: 29px;
  font-weight: 900;
  line-height: 1;
}

.hype-preview-change-wrap {
  text-align: right;
}

.hype-preview-change {
  margin-top: 4px;

  color: #d0d0d0;

  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.hype-preview-change.is-up {
  color: #53cf78;
}

.hype-preview-change.is-down {
  color: #ef6060;
}

.hype-preview-chart-wrap {
  position: relative;

  height: 82px;

  margin: 7px 0 11px;

  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0)
    );

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
}

.hype-preview-chart {
  display: block;

  width: 100%;
  height: 82px;

  overflow: visible;
}

.hype-preview-baseline {
  stroke:
    rgba(255, 255, 255, 0.10);

  stroke-width: 1;
}

.hype-preview-line {
  fill: none;

  stroke: #d71920;
  stroke-width: 2.25;

  vector-effect:
    non-scaling-stroke;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.hype-preview-dot {
  fill: #ffffff;

  stroke: #d71920;
  stroke-width: 2;

  vector-effect:
    non-scaling-stroke;
}

.hype-preview-chart-message {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #767676;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hype-preview-chart-message[hidden],
.hype-preview-chart[hidden] {
  display: none;
}

.hype-preview-stats {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 11px;
}

.hype-preview-stats > div {
  min-width: 0;
}

.hype-preview-stats strong {
  display: block;

  margin-top: 4px;

  color: #eeeeee;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.hype-preview-footer {
  padding-top: 9px;

  border-top:
    1px solid rgba(255, 255, 255, 0.10);

  color: #9c9c9c;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.10em;
  text-transform: uppercase;
}


/*
 * Extra protection against an oversized tooltip
 * if browser zoom is very high.
 */
@media (max-width: 480px) {
  .hype-preview {
    display: none !important;
  }
}