.iconbutton {
  background: var(--text-color);
  color: white;
  line-height: 0 !important;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  /*position: relative;*/
  /* overflow: hidden; */
  display: grid;
  place-items: center;
  margin: 0.2rem;
}
.iconbutton i {
  position: relative;
  transition: all var(--transition);
}
.iconbutton:hover i {
  transform: scale(1.15);
}
.iconbutton.play {
  font-size: 1.25em;
}
.iconbutton.replay {
  font-size: 1.25em;
  border: 0.1em solid var(--live-color);
}
.iconbutton.live {
  background-color: var(--live-color);
}

.iconbutton svg {
  color: var(--background-color);
}
.iconbutton svg path {
  fill: var(--background-color);
}
.iconbutton img {
  display: block;
  width: 1.5em !important;
  height: 1.5em;
  border-radius: 0 !important;
}
.iconbutton svg,
.iconbutton img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.iconbutton svg:last-of-type,
.iconbutton img:last-of-type {
  opacity: 0;
}
.iconbutton:hover svg:last-of-type,
.iconbutton.active svg:last-of-type,
.iconbutton:hover img:last-of-type,
.iconbutton.active img:last-of-type {
  opacity: 1;
}

/* icons */

i[class^="icon-"]::before,
i[class^="icon-"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s;
}
i[class^="icon-"]::after {
  opacity: 0;
}
.iconbutton:hover i[class^="icon-"]::after {
  opacity: 1;
}

i.icon-impulse::before {
  content: url("/download/834487667591741442/834487667591741443/flashlight-line.svg");
}
i.icon-impulse::after {
  content: url("/download/834487667591741440/834487667591741441/flashlight-fill.svg");
}

i.icon-series::before {
  content: url("/download/834487666673188864/834487666673188865/checkbox-multiple-blank-line.svg");
}

i.icon-series::after {
  content: url("/download/834487666476056578/834487666476056579/checkbox-multiple-blank-fill.svg");
}

i.icon-replay::before {
  content: url("/download/834487668640317440/834487668640317441/replay-line.svg");
}
i.icon-replay::after {
  content: url("/download/834487668510294020/834487668510294021/replay-fill.svg");
}

i.icon-play::before {
  content: url("/download/834487668510294018/834487668510294019/preview-line.svg");
}

i.icon-play::after {
  content: url("/download/834487668510294016/834487668510294017/preview-fill.svg");
}

i.icon-preview::before {
  content: url("/spa_root/icons/svg/calendar-line.svg");
}
i.icon-preview::after {
  content: url("/spa_root/icons/svg/calendar-fill.svg");
}