@media (prefers-color-scheme: light) {
  .red,
  .red-clr {
    --med-color: var(--accent-red);
  }
  .orange,
  .orange-clr {
    --med-color: var(--accent-orange);
  }
  .yellow,
  .yellow-clr {
    --med-color: var(--accent-yellow);
  }
  .green,
  .green-clr {
    --med-color: var(--accent-green);
  }
  .cyan,
  .cyan-clr {
    --med-color: var(--accent-teal);
  }
  .blue,
  .blue-clr {
    --med-color: var(--accent-blue);
  }
  .purple,
  .purple-clr {
    --med-color: var(--accent-purple);
  }
  .default,
  .default-clr {
    --med-color: #4a4a52;
  }
}
@media (prefers-color-scheme: dark) {
  .red,
  .red-clr,
  .orange,
  .orange-clr,
  .yellow,
  .yellow-clr,
  .green,
  .green-clr,
  .cyan,
  .cyan-clr,
  .blue,
  .blue-clr,
  .purple,
  .purple-clr,
  .default,
  .default-clr {
    --standalone-color-oklab: max(l, 0.78) a b;
  }
  .red,
  .red-clr {
    --med-color: oklab(from var(--accent-red) var(--standalone-color-oklab));
  }
  .orange,
  .orange-clr {
    --med-color: oklab(from var(--accent-orange) var(--standalone-color-oklab));
  }
  .yellow,
  .yellow-clr {
    --med-color: oklab(from var(--accent-yellow) var(--standalone-color-oklab));
  }
  .green,
  .green-clr {
    --med-color: oklab(from var(--accent-green) var(--standalone-color-oklab));
  }
  .cyan,
  .cyan-clr {
    --med-color: oklab(from var(--accent-teal) var(--standalone-color-oklab));
  }
  .blue,
  .blue-clr {
    --med-color: oklab(from var(--accent-blue) var(--standalone-color-oklab));
  }
  .purple,
  .purple-clr {
    --med-color: oklab(from var(--accent-purple) var(--standalone-color-oklab));
  }
  .default,
  .default-clr {
    --med-color: #dfe0eb;
  }
}

item-box checkbutton check:checked {
  color: var(--window-bg-color);
  background-color: var(--med-color);
}

.med-icon {
  background-color: rgb(from var(--med-color) r g b / calc(alpha * 0.135));
  color: var(--med-color);
  padding: 8px;
  border-radius: 99px;
}

/* med dialog buttons */
.red-clr,
.orange-clr,
.yellow-clr,
.green-clr,
.cyan-clr,
.blue-clr,
.purple-clr {
  border-radius: 99px;
  color: var(--med-color);
  box-shadow: inset 0 0 16px 16px
    rgb(from currentColor r g b / calc(alpha * 0.02));
}
.red-clr:hover,
.orange-clr:hover,
.yellow-clr:hover,
.green-clr:hover,
.cyan-clr:hover,
.blue-clr:hover,
.purple-clr:hover {
  box-shadow: inset 0 0 16px 16px
    rgb(from currentColor r g b / calc(alpha * 0.0325));
}
@media (prefers-contrast: more) {
  .red-clr,
  .orange-clr,
  .yellow-clr,
  .green-clr,
  .cyan-clr,
  .blue-clr,
  .purple-clr {
    box-shadow: inset 0 0 16px 16px
        rgb(from currentColor r g b / calc(alpha * 0.02)),
      inset 0 0 0 1px currentColor;
  }
  .red-clr:hover,
  .orange-clr:hover,
  .yellow-clr:hover,
  .green-clr:hover,
  .cyan-clr:hover,
  .blue-clr:hover,
  .purple-clr:hover {
    box-shadow: inset 0 0 16px 16px
        rgb(from currentColor r g b / calc(alpha * 0.0325)),
      inset 0 0 0 1px currentColor;
  }
}
