:root {
  --cc-bg: {{colors.surface.default.hex}};
  --noti-border-color: {{colors.primary.default.hex}};
  --noti-bg: {{colors.surface.default.hex}};
  --noti-bg-alpha: ;
  --noti-bg-darker: {{colors.surface.default.hex}};
  --noti-bg-hover: {{colors.on_secondary_fixed.default.hex}};
  --noti-bg-focus: {{colors.primary_container.default.hex_stripped}};
  --noti-close-bg: {{colors.primary_container.default.hex}}
  --noti-close-bg-hover: {{colors.inverse_primary.default.hex}};
  --text-color: {{colors.on_surface.default.hex}};
  --text-color-disabled: rgb(150, 150, 150);
  --bg-selected: {{colors.primary_container.default.hex}};
  --notification-icon-size: 64px;
  --notification-app-icon-size: calc(var(--notification-icon-size) / 3);
  --notification-group-icon-size: 32px;
  --border: 4px solid var(--noti-border-color);
  --border-radius: 12px;
  --notification-shadow: 0;
  --font-size-body: 15px;
  --font-size-summary: 16px;
  /* Deprecated variables (because of their typos). Keeeping them around for backwards compatibility. */
  --hover-tranistion: background 0.15s ease-out-quad;
  --group-collapse-tranistion: opacity 100ms ease-out-quad;
  --hover-transition: var(--hover-tranistion);
  --group-collapse-transition: var(--group-collapse-tranistion);
}