.ui-panel-link.color-btn.amber {
  color: #FFB000;
  border-color: #FFB00088;
}

.ui-panel-link.color-btn.green {
  color: #33FF33;
  border-color: #33FF3388;
}

.ui-panel-link.color-btn.purple {
  color: #a459ff;
  border-color: #61329b;
}

.ui-panel-link.color-btn.blue {
  color: #0f8fff;
  border-color: #034885;
}

.ui-panel-link.color-btn.red {
  color: #ff2929;
  border-color: #941717;
}

.ui-panel-link.color-btn.white {
  color: #e7e7e7;
  border-color: #b8b8b8;
}

.ui-panel-link.color-btn.picker {
  color: #ff69c0;
  border-color: #c059c0;
  cursor: pointer;
}

.ui-panel-link.color-btn.rainbow {
  --rainbow: linear-gradient(
    90deg,
    #ff0040,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #0099ff,
    #6a00ff,
    #ff00c8,
    #ff0040
  );

  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--rainbow);
  background-size: 300% 100%;
  animation: rainbowShift 12s linear infinite;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ui-panel-link.color-btn.rainbow::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 1px;

  background: var(--rainbow);
  background-size: 300% 100%;
  animation: rainbowShift 12s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

@keyframes rainbowShift {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 300% 50%;
  }
}

#settings-color-picker {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0.01;
}

.audio-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px;
}

.audio-control input[type="range"],
.audio-mute-row input {
  accent-color: currentColor;
}

.audio-control input[type="range"] {
  width: 100%;
}

.audio-mute-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 1.0em;
}