:root {
  --red-bg: color-mix(in srgb, #f4d9d8 97%, var(--accent-color));
  --red-fg: #680014;

  --orange-bg: color-mix(in srgb, #fae0bd 97%, var(--accent-color));
  --orange-fg: #4d2700;

  --yellow-bg: color-mix(in srgb, #f4efc5 97%, var(--accent-color));
  --yellow-fg: #3a3000;

  --green-bg: color-mix(in srgb, #dcefdd 97%, var(--accent-color));
  --green-fg: #03391c;

  --cyan-bg: color-mix(in srgb, #ceebf0 97%, var(--accent-color));
  --cyan-fg: #00363d;

  --blue-bg: color-mix(in srgb, #d6e4f7 97%, var(--accent-color));
  --blue-fg: #003355;

  --purple-bg: color-mix(in srgb, #dcdcf5 97%, var(--accent-color));
  --purple-fg: #361f73;

  --default-bg: var(--card-bg-color);
  --default-fg: var(--card-fg-color);
}

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

/* buttons */
.red-clr,
.orange-clr,
.yellow-clr,
.green-clr,
.cyan-clr,
.blue-clr,
.purple-clr {
  border-radius: 99px;
  box-shadow: inset 0 0 5px 1px
    color-mix(in srgb, currentColor 12%, transparent);
}
.red-clr:not(menubutton):hover,
.orange-clr:not(menubutton):hover,
.yellow-clr:not(menubutton):hover,
.green-clr:not(menubutton):hover,
.cyan-clr:not(menubutton):hover,
.blue-clr:not(menubutton):hover,
.purple-clr:not(menubutton):hover {
  box-shadow: inset 0 0 10px 1px
    color-mix(in srgb, currentColor 42%, transparent);
}

.red-clr {
  background-image: image(var(--red-bg));
  color: color-mix(in srgb, var(--red-fg) 70%, transparent);
}
.orange-clr {
  background-image: image(var(--orange-bg));
  color: color-mix(in srgb, var(--orange-fg) 70%, transparent);
}
.yellow-clr {
  background-image: image(var(--yellow-bg));
  color: color-mix(in srgb, var(--yellow-fg) 70%, transparent);
}
.green-clr {
  background-image: image(var(--green-bg));
  color: color-mix(in srgb, var(--green-fg) 70%, transparent);
}
.cyan-clr {
  background-image: image(var(--cyan-bg));
  color: color-mix(in srgb, var(--cyan-fg) 70%, transparent);
}
.blue-clr {
  background-image: image(var(--blue-bg));
  color: color-mix(in srgb, var(--blue-fg) 70%, transparent);
}
.purple-clr {
  background-image: image(var(--purple-bg));
  color: color-mix(in srgb, var(--purple-fg) 70%, transparent);
}

.red {
  background-color: color-mix(in srgb, var(--red-bg) 75%, transparent);
  color: var(--red-fg);
}
.red checkbutton check:checked {
  background-color: rgb(from var(--red-fg) r g b / calc(alpha * 0.9));
}

.orange {
  background-color: color-mix(in srgb, var(--orange-bg) 75%, transparent);
  color: var(--orange-fg);
}
.orange checkbutton check:checked {
  background-color: rgb(from var(--orange-fg) r g b / calc(alpha * 0.9));
}

.yellow {
  background-color: color-mix(in srgb, var(--yellow-bg) 75%, transparent);
  color: var(--yellow-fg);
}
.yellow checkbutton check:checked {
  background-color: rgb(from var(--yellow-fg) r g b / calc(alpha * 0.9));
}

.green {
  background-color: color-mix(in srgb, var(--green-bg) 75%, transparent);
  color: var(--green-fg);
}
.green checkbutton check:checked {
  background-color: rgb(from var(--green-fg) r g b / calc(alpha * 0.9));
}

.cyan {
  background-color: color-mix(in srgb, var(--cyan-bg) 75%, transparent);
  color: var(--cyan-fg);
}
.cyan checkbutton check:checked {
  background-color: rgb(from var(--cyan-fg) r g b / calc(alpha * 0.9));
}

.blue {
  background-color: color-mix(in srgb, var(--blue-bg) 75%, transparent);
  color: var(--blue-fg);
}
.blue checkbutton check:checked {
  background-color: rgb(from var(--blue-fg) r g b / calc(alpha * 0.9));
}

.purple {
  background-color: color-mix(in srgb, var(--purple-bg) 75%, transparent);
  color: var(--purple-fg);
}
.purple checkbutton check:checked {
  background-color: rgb(from var(--purple-fg) r g b / calc(alpha * 0.9));
}

.default {
  background-color: var(--default-bg);
  color: var(--default-fg);
}
.default checkbutton check:checked {
  background-color: rgb(from var(--default-fg) r g b / calc(alpha * 0.9));
}
