// Dark Mode
@mixin dark-mode {
  --page-text-color: var(--blue-grey-100);
  --page-background-color: var(--blue-grey-900);

  --sidebar-background-color: var(--blue-grey-800);
  --sidebar-background-color-alt: var(--blue-grey-700);
  --sidebar-text-color: var(--blue-grey-50);
  --sidebar-text-color-alt: var(--blue-grey-200);

  // Main buttons, solid with background hover
  --button-primary-background-color: var(--blue);
  --button-primary-text-color: var(--white);
  --button-primary-background-color-hover: var(--blue-700);
  --button-primary-background-color-disabled: var(--blue-grey-700);
  --button-primary-text-color-disabled: var(--blue-grey-300);

  // Alternate buttons
  --button-secondary-background-color: var(--blue-grey-600);
  --button-secondary-text-color: var(--blue-grey-100);
  --button-secondary-background-color-hover: var(--blue-grey-400);

  // Used on Heading/Cancel/Back buttons (outlined with text hover)
  --button-tertiary-background-color: var(--blue-grey-700);
  --button-tertiary-text-color: var(--blue-grey-200);
  --button-tertiary-text-color-hover: var(--blue-grey-100);
  --button-tertiary-background-color-disabled: var(--blue-grey-400);
  --button-tertiary-text-color-disabled: var(--blue-grey-600);

  --breadcrumb-text-color: var(--blue-grey-600);
  --breadcrumb-glue-color: var(--blue-grey-800);

  --modal-header-background-color: #1c232a; //1c252a;
  --modal-background-color: var(--blue-grey-900);
  --modal-smoke-color: var(--blue-grey-800);
  --modal-tab-text-color: var(--blue-grey-600);
  --modal-tab-text-color-active: var(--white);
  --modal-tab-text-color-disabled: var(--blue-grey-400);

  --notice-text-color: var(--page-text-color);
  --notice-text-color-alt: var(--blue-grey-400);
  --notice-background-color: var(--blue-grey-800);

  --tooltip-background-color: var(--blue-grey-100);
  --tooltip-text-color: var(--blue-grey-800);

  --popover-background-color: var(--page-background-color);
  --popover-text-color: var(--blue-grey-100);
  --popover-text-color-hover: var(--blue);
  --popover-text-color-disabled: var(--blue-grey-600);

  --card-background-color: var(--blue-grey-800);
  --card-background-color-hover: var(--blue-grey-700);
  --card-text-color: var(--white);
  --card-text-color-disabled: var(--blue-grey-600);

  --table-head-border-color: var(--blue-grey-700);
  --table-row-border-color: var(--blue-grey-800);

  --progress-background-color: var(--blue-grey-100);
  --progress-background-color-accent: var(--blue-grey-900);

  --loading-background-color: var(--blue-grey-800);
  --loading-background-color-accent: var(--blue);

  --input-text-color: var(--blue-grey-100);
  --input-icon-color: var(--blue-grey-600);
  --input-placeholder-color: var(--blue-grey-600);
  --input-border-color: var(--blue-grey-700);
  --input-border-color-hover: var(--blue-grey-600);
  --input-border-color-focus: var(--blue-grey-400);
  --input-background-color: var(--blue-grey-900);
  --input-background-color-alt: var(--blue-grey-800);
  --input-background-color-alt-hover: var(--blue-grey-700);
  --input-background-color-disabled: var(--blue-grey-800);
  --input-background-color-active: var(--blue);
  --input-text-color-active: var(--white);
  --input-required-color: var(--blue-grey-200);

  --heading-text-color: var(--white);
  --note-text-color: var(--blue-grey-600);

  --empty-value: var(--blue-grey-700);
  --off-white: #f9fafa;
  --highlight: var(--blue-grey-800);
}

@media (prefers-color-scheme: dark) {
  body.private.auto,
  body.private.dark, {
    @include dark-mode;
  }
}
body.private.dark {
  @include dark-mode;
}

