// stylelint-disable declaration-no-important
body:not(.theme-dark) .hide-theme-light {
  display: none !important;
}

@include dark-mode {
  & {
    --#{$prefix}body-color: #{$dark-mode-text};
    --#{$prefix}body-color-rgb: #{to-rgb($dark-mode-text)};
    --#{$prefix}muted: rgba(153, 159, 164, 1);

    --#{$prefix}body-bg: #{$dark-mode-darken};
    --#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};

    --#{$prefix}bg-forms: #{$dark-mode-darken};
    --#{$prefix}bg-surface: #{$dark};
    --#{$prefix}bg-surface-dark: #{$dark-mode-darken};
    --#{$prefix}bg-surface-secondary: #{$dark-mode-lighten};
    --#{$prefix}bg-surface-tertiary: #{$dark-mode-darken};

    --#{$prefix}link-color: #{lighten($primary, 8%)};
    --#{$prefix}link-hover-color: #{$primary};

    --#{$prefix}active-bg: #{$dark-mode-lighten};
    --#{$prefix}disabled-color: var(--#{$prefix}gray-700);

    --#{$prefix}card-bg: #{$dark-mode-darken};
    --#{$prefix}card-bg-hover: #{$dark-mode-darken};
    --#{$prefix}card-bg-rgb: #{to-rgb($dark-mode-darken)};
    --#{$prefix}card-color: #{$dark-mode-text};

    --#{$prefix}border-color: var(--#{$prefix}dark-mode-border-color);
    --#{$prefix}border-color-light: var(--#{$prefix}dark-mode-border-color-light);
    --#{$prefix}border-color-active: var(--#{$prefix}dark-mode-border-color-active);

    --#{$prefix}btn-color: #{$dark-mode-darken};

    --#{$prefix}code-color: var(--#{$prefix}body-color);
    --#{$prefix}code-bg: #{$dark-mode-border-color-light};

    @each $color, $value in $theme-colors {
      --#{$prefix}#{$color}-lt-rgb: #{to-rgb(theme-color-lighter($value, $dark))};
    }

    color: $dark-mode-text;
    background-color: $dark-mode-darken;
  }

  .page {
    color: $dark-mode-text;
  }

  .hide-theme-dark {
    display: none !important;
  }

  .text-body {
    color: $dark-mode-text!important;
  }

  .card,
  .card-footer,
  .card-stacked::after,
  .footer:not(.footer-transparent),
  .modal-content,
  .modal-header,
  .dropdown-menu,
  .toast,
  .toast-header,
  .alert:not(.alert-important) {
    background-color: var(--#{$prefix}bg-surface);
    color: inherit;
  }

  .modal {
    --#{$prefix}modal-border-color: var(--#{$prefix}border-color);
  }

  .bg-light {
    background-color: $dark-mode-darken !important;
  }

  .card-tabs .nav-tabs .nav-link {
    background-color: $dark-mode-darken;
    color: inherit;
  }

  .card-tabs .nav-tabs .nav-link.active {
    background-color: $dark;
    color: inherit;
  }

  .form-check-input:not(:checked),
  .form-select,
  .form-file-text,
  .form-control,
  .form-selectgroup-check {
    background-color: $dark-mode-darken;
    color: $dark-mode-text;
    border-color: $dark-mode-border-color;
  }

  .form-control-plaintext {
    color: $dark-mode-text;
  }

  .input-group-flat .input-group-text {
    background-color: $dark-mode-darken;
  }

  .input-group-text {
    border-color: $dark-mode-border-color;
  }

  .highlight {
    background-color: $dark-mode-darken;
  }

  .timeline-event-icon {
    background-color: #{$dark-mode-lighten};
  }

  .markdown,
  .markdown>*,
  .accordion-button {
    color: inherit;
  }

  .btn-close,
  .accordion-button:after {
    filter: $btn-close-white-filter;
  }

  .apexcharts-text {
    fill: $dark-mode-text;
  }

  .apexcharts-gridline {
    stroke: var(--#{$prefix}border-color);
  }

  .apexcharts-legend-text {
    color: inherit !important;
  }

  .navbar-brand-autodark {
    @include autodark-image;
  }

  .table thead th,
  .input-group-text {
    background: transparent;
  }

  .list-group-header {
    background: $dark-mode-darken;
  }

  .list-group-item {
    //border-color: $border-color-transparent;
  }

  .list-group-item:not(.disabled):not(:disabled) {
    color: $dark-mode-text;
  }

  .list-group-item {
    &.disabled,
    &:disabled {
      color: $gray-600;
    }
  }

  .apexcharts-radialbar-area {
    stroke: $dark-mode-border-color;
  }

  .form-control.is-invalid,
  .was-validated .form-control:invalid {
    border-color: var(--#{$prefix}danger);
  }

  .form-control.is-valid,
  .was-validated .form-control:valid {
    border-color: var(--#{$prefix}success);
  }
}