@import url("../shared.css");

/* Fixed 800 x 1200 league-card front. */
.driver-card__driver-image { object-position: right bottom; }

.rating-rail {
  display: grid;
  gap: 6.4px;
  grid-template-rows: repeat(4, 160px);
  left: 24px;
  position: absolute;
  top: 24px;
  width: 232px;
  z-index: 3;
}

.rating-panel {
  align-content: center;
  background: rgba(0, 0, 0, .82);
  border: 2px solid var(--white);
  border-radius: 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: 7.2px 8px;
  text-align: center;
}

.rating-panel--blue { --tone: var(--blue); }
.rating-panel--green { --tone: var(--green); }

.rating-panel span {
  color: var(--tone);
  font: 700 16.8px "Orbitron", sans-serif;
  line-height: 1;
  padding-bottom: 9.2px;
  position: relative;
  text-transform: uppercase;
  width: 100%;
}

.rating-panel span::after {
  background: linear-gradient(90deg, transparent 0%, var(--tone) 18%, var(--tone) 82%, transparent 100%);
  bottom: 0;
  box-shadow: 0 0 7px var(--tone);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

.rating-panel strong {
  align-self: center;
  color: var(--white);
  font: 700 50.4px "Orbitron", sans-serif;
  line-height: 1;
  text-shadow: 3px 3px 0 #000;
  white-space: nowrap;
}