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

  --orange-bg: color-mix(in srgb, #58402b 97%, var(--accent-color));
  --orange-fg: #fdddbd;

  --yellow-bg: color-mix(in srgb, #4c472b 97%, var(--accent-color));
  --yellow-fg: #ece3bd;

  --green-bg: color-mix(in srgb, #384b3c 97%, var(--accent-color));
  --green-fg: #d2e8d4;

  --cyan-bg: color-mix(in srgb, #33474f 97%, var(--accent-color));
  --cyan-fg: #cfe6f1;

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

  --purple-bg: color-mix(in srgb, #3f3851 97%, var(--accent-color));
  --purple-fg: #ebddf7;

  --card-bg-color: color-mix(in srgb, #3a3a3d 99%, var(--accent-color));

  --list-border: inset 0 0 0 1px
    rgb(from var(--border-color) r g b / calc(alpha * 0.3));
  --list-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
}

.boxed-list,
.boxed-list-separate {
  --list-border: inset 0 0 0 1px
    rgb(from var(--border-color) r g b / calc(alpha * 0.2));
  --card-bg-color: color-mix(in srgb, #343437 99.33%, var(--accent-color));
}

#medication-dialog row#delete {
  --list-border: inset 0 0 0 1px
    rgb(from var(--card-fg-color) r g b / calc(alpha * 0.03));
}

row.expander list.nested {
  background-color: color-mix(
    in srgb,
    var(--card-shade-color) 35%,
    transparent
  );
}

button.floating {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.13), 0 1px 2px 1px rgba(0, 0, 0, 0.15);
  margin: 10px 4px;
}
button.floating:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px 1px rgba(0, 0, 0, 0.17);
}
button.floating:not(.suggested-action) {
  background-color: color-mix(in srgb, #434346 99%, var(--accent-color));
}
button.floating:not(.suggested-action):hover {
  background-color: color-mix(in srgb, #4d4d50 99%, var(--accent-color));
}
button.floating:not(.suggested-action):active {
  background-color: color-mix(in srgb, #57575a 99%, var(--accent-color));
}
button.floating.destructive-action {
  background-color: #4c3335;
}
button.floating.destructive-action:hover {
  background-color: #5a393a;
}
button.floating.destructive-action:active {
  background-color: #834a4a;
}

time-group-selection:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill='%23823a5f' d='m14.983 3.5-1-1-7.469 7.516L3.1 6.539l-2 2 5.414 5.477L15.983 4.5z' style='fill:%23ffffff'/%3E%3C/svg%3E");
}
