// stylelint-disable declaration-no-important

@mixin dark-mode {
  & {
    color: #ffffff;
    background: $dark-body-bg;
  }

  .card,
  .navbar-light {
    background: $dark;
    color: inherit;
  }

  .card {
    border-color: transparent;
  }

  .btn-secondary {
    @include button-variant($min-white, $border-color, $light, rgba($dark, 0), $border-color, $light);
    background-image: none;
  }

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

  .apexcharts-text {
    fill: #ffffff;
  }

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

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

@media not print {
  .theme-dark {
    @include dark-mode;
  }
}

@media not print and (prefers-color-scheme: dark) {
  .theme-dark-auto {
    @include dark-mode;
  }
}