/* Icon range. White shapes in /icons, painted with the button colour.
   run back forward up down check close lock unlock plus minus bars rows qubit gate
   Add class "ico" plus one "ico-*" class on any control. */

.ico {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.ico::before,
.ico-end::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  background: currentColor;
  border: 0;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  mask-mode: alpha;
}

.ico-end::before { content: none; }

.ico-run { --ico: url("/icons/run.svg"); }
.ico-back { --ico: url("/icons/back.svg"); }
.ico-forward { --ico: url("/icons/forward.svg"); }
.ico-up { --ico: url("/icons/up.svg"); }
.ico-down { --ico: url("/icons/down.svg"); }
.ico-check { --ico: url("/icons/check.svg"); }
.ico-close { --ico: url("/icons/close.svg"); }
.ico-lock { --ico: url("/icons/lock.svg"); }
.ico-unlock { --ico: url("/icons/unlock.svg"); }
.ico-plus { --ico: url("/icons/plus.svg"); }
.ico-minus { --ico: url("/icons/minus.svg"); }
.ico-bars { --ico: url("/icons/bars.svg"); }
.ico-rows { --ico: url("/icons/rows.svg"); }
.ico-qubit { --ico: url("/icons/qubit.svg"); }
.ico-gate { --ico: url("/icons/gate.svg"); }

#run-free,
#prev,
#next,
#demo-on,
#gate-close,
#demo-off:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

#demo-off[hidden] { display: none; }

#run-free { --ico: url("/icons/run.svg"); }
#prev { --ico: url("/icons/back.svg"); }
#next { --ico: url("/icons/forward.svg"); }
#demo-on { --ico: url("/icons/check.svg"); }
#demo-off { --ico: url("/icons/lock.svg"); }
#gate-close { --ico: url("/icons/close.svg"); }

#run-free::before,
#prev::before,
#demo-on::before,
#demo-off::before,
#gate-close::before,
#next::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  background: currentColor;
  border: 0;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  mask-mode: alpha;
}