$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: #0a0b0e;
$bg-dark-mode-alt: #242529;
$bg-light-dark-mode: #1c1c1f;
$bg-light-dark-mode-rgb: 28, 28, 31;
$text-color-dark-mode: #abb2bf;
$text-color-dark-mode-accent: lighten($text-color-dark-mode, 10%);
$border-color-dark-mode: #47494f;

* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@mixin dark-mode {
  --bs-primary: hsl(var(--ngx-green), calc(var(--l) + 10%));
  --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-body-color: #{$text-color-dark-mode};
  --bs-light: #{$bg-light-dark-mode};
  --bs-light-rgb: #{$bg-light-dark-mode-rgb};
  --bs-border-color: #{$border-color-dark-mode};
  --ngx-bg-darker: #{$bg-dark-mode-accent};
  --ngx-bg-alt: #{$bg-dark-mode-alt};
  --ngx-focus-alpha: 0.7;

  .navbar.bg-primary{
    --bs-primary: hsl(var(--ngx-green),var(--l));
    --bs-primary-rgb: var(--bs-primary);
  }
  
  .navbar-brand {
    color: var(--bs-body-color);
  }
  
  .border {
    border-color: var(--bs-border-color) !important;
  }

  .border-end {
    border-right: 1px solid var(--bs-border-color) !important;
  }

  .border-start {
    border-left: 1px solid var(--bs-border-color) !important;
  }

  .border-bottom {
    border-bottom: 1px solid var(--bs-border-color) !important;
  }

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

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

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

  .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-container {
    border: none !important;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    overflow: hidden;
  }

  .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: $text-color-dark-mode-accent;
    }

  }

  .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: $text-color-dark-mode-accent;
  }

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

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

  .ngx-file-drop__drop-zone--over {
    background-color: var(--ngx-primary-darken-15) !important;
  }

  .toast {
    background-color: hsla(var(--ngx-green), calc(var(--l) - 18%), 0.9);
  }
  
  .toast-header {
    background-color: hsla(var(--ngx-green), calc(var(--l) - 10%), 0.9);
  }
}

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