// stylelint-disable declaration-no-important

@include dark-mode {
  & {
    color: $dark-mode-text;
    background-color: $dark-mode-darken;
  }

  .card,
  .footer,
  .modal-content,
  .modal-header,
  .dropdown-menu,
  .flatpickr-calendar {
    background-color: $dark;
    color: inherit;
  }

  .card {
    border-color: transparent;
  }

  .btn-white,
  .form-file-button {
    @include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
    background-image: none;
  }

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

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

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

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

  .avatar {
    background-color: $dark-mode-lighten;
  }

  .avatar-list-stacked .avatar {
    box-shadow: 0 0 0 2px $dark;
  }

  .markdown,
  .markdown>*,
  .close {
    color: inherit;
  }

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

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

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