:root {
  // base color e.g. #17541f = hsl(128, 57%, 21%)
  --pngx-primary: 128, 57%;
  --pngx-primary-lightness: 21%;
  --pngx-primary-text-contrast: var(--bs-light);

  --bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
  --bs-border-color: var(--bs-gray-400);
  --pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
  --pngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
  --pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
  --pngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
  --pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
  --pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
  --pngx-bg-darker: var(--bs-gray-100);
  --pngx-focus-alpha: 0.3;
}

// Dark text colors allow for maintain contrast with theme color changes
$text-color-light-bg: #212529;
$text-color-dark-bg: #abb2bf;
$text-color-dark-bg-accent: lighten($text-color-dark-bg, 10%);
// Taken from bootstrap
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#212529'/></svg>");

.primary-light {
  --pngx-primary-text-contrast: #{$text-color-light-bg} !important;

  .form-check-input:checked[type=checkbox] {
    background-image: escape-svg($form-check-input-checked-bg-image-dark);
  }

  .form-check-input:checked[type=radio] {
    background-image: escape-svg($form-check-radio-checked-bg-image-dark);
  }
}

.primary-dark {
  --pngx-primary-text-contrast: #{$text-color-dark-bg} !important;
}

// Dark mode
$primary-dark-mode: #45973a;
$primary-dark-mode-rgb: 69, 151, 58;
$primary-dark-mode-darken-10: darken($primary-dark-mode, 10%);
$danger-dark-mode: #b71631;
$danger-dark-mode-rgb: 183, 22, 49;
$bg-dark-mode: #161618;
$bg-dark-mode-rgb: 22, 22, 24;
$bg-dark-mode-accent: #101216;
$bg-dark-mode-alt: #242529;
$bg-light-dark-mode: #1c1c1f;
$bg-light-dark-mode-rgb: 28, 28, 31;
$border-color-dark-mode: #47494f;

@mixin dark-mode {
  --bs-primary: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
  --bs-body-color: #{$text-color-dark-bg};
  --pngx-body-color-accent: #{$text-color-dark-bg-accent};
  --bs-danger: #{$danger-dark-mode};
  --bs-danger-rgb: #{$danger-dark-mode-rgb};
  --bs-body-bg: #{$bg-dark-mode};
  --bs-body-bg-rgb: #{$bg-dark-mode-rgb};
  --bs-light: #{$bg-light-dark-mode};
  --bs-light-rgb: #{$bg-light-dark-mode-rgb};
  --bs-border-color: #{$border-color-dark-mode};
  --pngx-bg-darker: #{$bg-dark-mode-accent};
  --pngx-bg-alt: #{$bg-dark-mode-alt};
  --pngx-focus-alpha: 0.7;
  --pngx-primary-faded: var(--pngx-primary-darken-15);
  --pngx-primary-text-contrast: var(--bs-body-color);

  .text-dark, .text-light {
    color: var(--bs-body-color) !important;
  }

  .btn-outline-primary, .btn-primary {
    &:hover, &:focus, &.active, &:active {
      color: var(--bs-light) !important;
    }
  }

  .btn-outline-secondary {
    &:hover, &:focus, &.active, &:active {
      background-color: var(--pngx-bg-darker);
      color: var(--bs-primary);
    }
  }

  .search-form-container {
    input, input:focus {
      color: var(--bs-body-color) !important;
    }
  }

  .card {
    background-color: var(--bs-body-bg);

    .card-header {
      background-color: rgba(0, 0, 0, 0.12);
    }
  }

  .modal-content, .modal-header, .modal-body, .modal-footer {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
  }

  app-tag .badge {
    filter: brightness(.8);
  }

  .doc-img {
    mix-blend-mode: normal;
    border-radius: 0;
    border-color: var(--bs-border-color);
    filter: invert(10%);

    &.border-end {
      border-right: none !important;
    }
  }

  .doc-img.inverted {
    filter: invert(95%) hue-rotate(180deg);
  }

  .card-selected .doc-img {
    mix-blend-mode: luminosity;
  }

  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: $bg-light-dark-mode;
  }

  table {
    .des,
    .asc {
      &::after {
        filter: invert(0.8); /* arrow is a black inline png bkgd image (!) so use filter */
      }
    }

    &.table-hover > tbody > tr:hover > * {
      background-color: $bg-light-dark-mode;
      color: var(--pngx-body-color-accent);
    }

  }

  .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--pngx-body-color-accent);
  }

  .close, .modal .btn-close, .alert .btn-close {
    text-shadow: 0 1px 0 #666;
  }

  .modal .btn-close, .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  .toast, .toast-header {
    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.9);
  }

  .toast,
  .toast .toast-header,
  .toast .btn-close {
    color: var(--pngx-primary-text-contrast);
  }
}

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