.d4-skill-row {
  --top-padding: 12px;
  border-radius: 8px;
  width: 100%;
  height: 198px;
  box-sizing: border-box;
  padding: var(--top-padding) 17px 32px;
  position: relative;
  background: linear-gradient(90deg, rgba(255, 123, 28, 0.10) 0%, rgba(255, 123, 28, 0.00) 100%),
              linear-gradient(rgba(26, 26, 37) 0 0);
}

.d4-skill-row .d4-skill-row-banner {
  padding: 9px;
  color: #FFFEFD;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  position: relative;
  width: fit-content;
}

.d4-skill-row .d4-skill-row-recommended {
  color: #FF7B1C;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.d4-skill-row .d4-skill-row-icons {
  --entry-width: 80px;
  --image-width: 70px;
  position: absolute;
  top: 86px;
  margin-left: calc((var(--image-width) - var(--entry-width)) / 2);
}

.d4-skill-row .icy-gtnbrg-tooltip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: var(--entry-width);
}

.d4-skill-row .icy-gtnbrg-tooltip-img {
  height: var(--image-width);
  width: var(--image-width);
  margin: 0;
}

.d4-skill-row .tooltip-spell-name {
  color: white;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-top: 2px;
}


.d4-skill-row-bg-barbarian::before,
.d4-skill-row-bg-druid::before,
.d4-skill-row-bg-necromancer::before,
.d4-skill-row-bg-rogue::before,
.d4-skill-row-bg-sorcerer::before,
.d4-skill-row-bg-spiritborn::before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

.d4-skill-row-bg-barbarian::before {
  background-image: url(https://wp.icy-veins.com/static/public/barbarian.webp);
}

.d4-skill-row-bg-druid::before {
  background-image: url(https://wp.icy-veins.com/static/public/druid.webp);
}

.d4-skill-row-bg-necromancer::before {
  background-image: url(https://wp.icy-veins.com/static/public/necro.webp);
}

.d4-skill-row-bg-rogue::before {
  background-image: url(https://wp.icy-veins.com/static/public/rogue.webp);
}

.d4-skill-row-bg-sorcerer::before {
  background-image: url(https://wp.icy-veins.com/static/public/sorcerer.webp);
}

.d4-skill-row-bg-spiritborn::before {
  background-image: url(https://wp.icy-veins.com/static/public/spiritborn.webp);
}

/* This is a shoddy replacement for the remixicon star */
.d4-skill-row-recommended label::before {
  content: "\2B50";
  filter: hue-rotate(-30deg);
}