.instruction-list {
  flex: 1 1 auto;
}

.instruction-row {
  display: flex;
  flex-direction: row;
}

.instruction-cell {
  flex: 1 0 0;
  font-family: var(--code-font-family);
  font-weight: var(--code-font-weight);
  font-size: var(--code-font-size);
  font-variant-ligatures: var(--code-font-variant-ligatures);
  text-wrap: nowrap;
  white-space: pre;
  overflow: hidden;
  padding-left: 0.5em;
  cursor: default;
}

.highlightable {
  cursor: pointer;
}
.highlighted {
  color: white;
  background-color: #aa8b00;
}

.diff-any {
  background-color: rgba(255, 255, 255, 0.03);
}

.segment-dim {
  color: var(--line-number-foreground);
}
.segment-bright {
  color: var(--color-bright);
}
.segment-replace {
  color: var(--color-blue);
}
.segment-delete {
  color: var(--color-red);
}
.segment-insert {
  color: var(--color-green);
}

.rotation0 {
  color: light-dark(
    /* hsv(0° 60% 80%) */
    rgb(205, 82, 82),
    magenta
  );
}
.rotation1 {
  color: light-dark(
    /* hsv(40° 60% 80%) */
    rgb(205, 164, 82),
    cyan
  );
}
.rotation2 {
  color: light-dark(
    /* hsv(80° 60% 80%) */
    rgb(164, 205, 82),
    rgb(0, 212, 0)
  );
}
.rotation3 {
  color: light-dark(
    /* hsv(120° 60% 80%) */
    rgb(82, 205, 82),
    red
  );
}
.rotation4 {
  color: light-dark(
    /* hsv(160° 60% 80%) */
    rgb(82, 205, 164),
    rgb(103, 106, 255)
  );
}
.rotation5 {
  color: light-dark(
    /* hsv(200° 60% 80%) */
    rgb(82, 164, 205),
    lightpink
  );
}
.rotation6 {
  color: light-dark(
    /* hsv(240° 60% 80%) */
    rgb(82, 82, 205),
    lightcyan
  );
}
.rotation7 {
  color: light-dark(
    /* hsv(280° 60% 80%) */
    rgb(164, 82, 205),
    lightgreen
  );
}
.rotation8 {
  color: light-dark(
    /* hsv(320° 60% 80%) */
    rgb(205, 82, 164),
    grey
  );
}
