//
// Dark Mode Theme
// --------------------------------------------------

@mixin color-theme-dark(
  $primary,
  $primary-light,
  $primary-lighter,
  $primary-dark,
  $primary-darker,
  $body-bg,
  $body-bg-dark,
  $body-bg-light,
  $body-color,
  $body-color-dark,
  $body-color-light,
  $link-color,
  $link-hover-color
) {
  .dark-mode {
    // Main Structure
    &,
    #side-overlay,
    #page-loader {
      background-color: darken($primary-darker, 3%);
      color: darken($body-bg-dark, 10%);
    }

    // Typography
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
      color: $body-bg-dark;
    }

    hr {
      border-top-color: lighten($primary-darker, 6%);
    }

    .content-heading,
    .content-heading small {
      color: darken($body-bg-dark, 25%) !important;
    }

    code {
      color: $pink-300;
    }

    .story p,
    p.story {
      color: darken($body-bg-dark, 20%);
    }

    // Links
    a:not(.badge):not(.btn):not(.btn-block-option):not(.block):not(.dropdown-item):not(.nav-link):not(.page-link):not(.alert-link):not(.nav-main-link):not(.list-group-item-action):not(.close):not(.fc-event):not(.text-success-light):not(.text-danger-light):not(.text-warning-light):not(.text-info-light) {
      color: lighten($primary, 5%);

      &.link-fx::before {
        background-color: lighten($primary, 5%);
      }

      &:hover {
        color: $primary;
      }
    }

    // Contextual background colors
    @include bg-variant(".bg-body", darken($primary-darker, 3%));
    @include bg-variant(".bg-body-light", lighten($primary-darker, 3%));
    @include bg-variant(".bg-body-dark", darken($primary-darker, 4.5%));
    @include bg-variant(".bg-body-extra-light", $primary-darker);
    @include bg-variant(".bg-muted", darken($body-bg-light, 30%));

    // Contextual text colors
    @include text-emphasis-variant(".text-primary", lighten($primary, 5%));

    @include text-emphasis-variant(".text-success", lighten($success, 5%));
    @include text-emphasis-variant(".text-warning", lighten($warning, 5%));
    @include text-emphasis-variant(".text-info", lighten($info, 5%));
    @include text-emphasis-variant(".text-danger", lighten($danger, 5%));

    @include text-emphasis-variant(
      ".text-body-bg",
      darken($primary-darker, 3%)
    );
    @include text-emphasis-variant(
      ".text-body-bg-dark",
      darken($primary-darker, 6%)
    );
    @include text-emphasis-variant(
      ".text-body-bg-light",
      lighten($primary-darker, 3%)
    );
    @include text-emphasis-variant(
      ".text-body-color",
      darken($body-bg-dark, 10%)
    );
    @include text-emphasis-variant(
      ".text-body-color-dark",
      darken($body-bg-dark, 20%)
    );
    @include text-emphasis-variant(".text-body-color-light", $body-bg-dark);

    @include text-emphasis-variant(".text-dark", darken($body-bg-dark, 20%));

    @include text-emphasis-variant(".text-muted", darken($body-bg-light, 30%));

    // Buttons
    .btn-secondary,
    .btn-alt-secondary {
      @include button-variant(
        lighten($primary-darker, 5%),
        lighten($primary-darker, 5%),
        $white,
        darken($primary-darker, 5%),
        darken($primary-darker, 5%),
        $white
      );
    }

    // Nav links
    .nav-link {
      color: darken($body-bg-dark, 10%);

      &:hover,
      &:focus {
        color: $primary;
      }
    }

    // Nav Pills
    .nav-pills {
      .nav-link {
        color: darken($body-bg-dark, 30%);

        &:hover,
        &:focus {
          background-color: lighten($primary-darker, 8%);
        }
      }

      .nav-link.active,
      .show > .nav-link {
        color: $white;
        background-color: $primary;
      }
    }

    // Nav Tabs
    .nav-tabs {
      border-bottom-color: lighten($primary-darker, 6%);

      .nav-link {
        &:hover,
        &:focus {
          border-color: lighten($primary-darker, 6%)
            lighten($primary-darker, 6%) lighten($primary-darker, 6%);
        }
      }

      .nav-link.active,
      .nav-item.show .nav-link {
        color: darken($body-bg-dark, 10%);
        background-color: transparent;
        border-color: lighten($primary-darker, 6%) lighten($primary-darker, 6%)
          $primary-darker;
      }
    }

    // Tabs block variation
    .nav-tabs-block {
      background-color: lighten($primary-darker, 6%);

      .nav-link {
        border-color: transparent;
        color: darken($body-bg-dark, 10%);

        &:hover,
        &:focus {
          color: $primary;
          background-color: lighten($primary-darker, 3%);
          border-color: transparent;
        }
      }

      .nav-link.active,
      .nav-item.show .nav-link {
        color: darken($body-bg-dark, 10%);
        background-color: $primary-darker;
        border-color: transparent;
      }
    }

    // Tabs block alternative variation
    .nav-tabs-alt {
      border-bottom-color: lighten($primary-darker, 3%);

      .nav-link {
        color: darken($body-bg-dark, 10%);
        background-color: transparent;
        border-color: transparent;

        &:hover,
        &:focus {
          color: $primary;
          background-color: transparent;
          border-color: transparent;
          box-shadow: inset 0 -3px $primary;
        }
      }

      .nav-link.active,
      .nav-item.show .nav-link {
        color: darken($body-bg-dark, 10%);
        background-color: transparent;
        border-color: transparent;
        box-shadow: inset 0 -3px $primary;
      }
    }

    // Various Items Navigation
    .nav-items {
      a {
        &:hover {
          background-color: lighten($primary-darker, 8%);
        }

        &:active {
          background-color: transparent;
        }
      }

      > li:not(:last-child) > a {
        border-bottom-color: lighten($primary-darker, 6%);
      }
    }

    // Pagination
    .page-link {
      color: darken($body-bg-dark, 30%);

      &:hover {
        color: darken($body-bg-dark, 20%);
      }

      &:focus {
        color: darken($body-bg-dark, 10%);
        background-color: transparent;
      }
    }

    .page-item.active .page-link {
      background-color: transparent;
    }

    .page-item.disabled .page-link {
      color: darken($body-bg-dark, 50%);
      background-color: transparent;
      border-bottom: transparent;
    }

    // List Group
    .list-group-item-action {
      color: darken($body-bg-dark, 10%);

      &:hover,
      &:focus {
        color: darken($body-bg-dark, 10%);
        background-color: lighten($primary-darker, 4.5%);
      }

      &:active {
        color: darken($body-bg-dark, 10%);
        background-color: darken($primary-darker, 3%);
      }

      &.disabled {
        color: darken($body-bg-dark, 40%);
      }
    }

    .list-group-item {
      color: darken($body-bg-dark, 10%);
      background-color: lighten($primary-darker, 3%);
      border-color: darken($primary-darker, 4.5%);

      &.active {
        color: $white;
        background-color: $primary;
        border-color: $primary;
      }
    }

    // Popovers
    .popover {
      border-color: darken($primary-darker, 4.5%);
      background-color: lighten($primary-darker, 3%);
    }

    .bs-popover-top {
      .popover-arrow::before {
        border-top-color: fade-in(darken($primary-darker, 4.5%), 0.05);
      }

      .popover-arrow::after {
        border-top-color: lighten($primary-darker, 3%);
      }
    }

    .bs-popover-end {
      .popover-arrow::before {
        border-right-color: fade-in(darken($primary-darker, 4.5%), 0.05);
      }

      .popover-arrow::after {
        border-right-color: lighten($primary-darker, 3%);
      }
    }

    .bs-popover-bottom {
      .popover-arrow::before {
        border-bottom-color: fade-in(darken($primary-darker, 4.5%), 0.05);
      }

      .popover-arrow::after {
        border-bottom-color: lighten($primary-darker, 3%);
      }
    }

    .bs-popover-start {
      .popover-arrow::before {
        border-left-color: fade-in(darken($primary-darker, 4.5%), 0.05);
      }

      .popover-arrow::after {
        border-left-color: lighten($primary-darker, 3%);
      }
    }

    .bs-popover-auto {
      &[x-placement^="top"] {
        @extend .bs-popover-top;
      }
      &[x-placement^="right"] {
        @extend .bs-popover-end;
      }
      &[x-placement^="bottom"] {
        @extend .bs-popover-bottom;
      }
      &[x-placement^="left"] {
        @extend .bs-popover-start;
      }
    }

    .popover-header {
      color: $body-bg-dark;
      background-color: lighten($primary-darker, 3%);
      border-bottom-color: darken($primary-darker, 4.5%);
    }

    .popover-body {
      color: darken($body-bg-dark, 10%);
      background-color: lighten($primary-darker, 3%);
    }

    // Dropdowns
    .dropdown-menu {
      color: darken($body-bg-dark, 10%);
      background-color: lighten($primary-darker, 3%);
      border-color: lighten($primary-darker, 3%);
      box-shadow: 0 0.25rem 2rem rgba($black, 0.25);

      .dropdown-item {
        color: darken($body-bg-dark, 15%);

        &:hover,
        &:focus {
          color: darken($body-bg-dark, 10%);
          background-color: lighten($primary-darker, 8%);
        }

        &.active,
        &:active {
          color: darken($body-bg-dark, 5%);
          background-color: lighten($primary-darker, 12%);
        }

        &.disabled,
        &:disabled {
          color: darken($body-bg-dark, 50%);
        }
      }

      .dropdown-divider {
        border-color: lighten($primary-darker, 10%);
      }

      .dropdown-item-text {
        color: darken($body-bg-dark, 10%);
      }

      .dropdown-header {
        color: darken($body-bg-dark, 25%) !important;
      }
    }

    // Tables
    .table {
      --#{$variable-prefix}table-striped-color: #{$body-bg-light};
      --#{$variable-prefix}table-striped-bg: #{darken($primary-darker, 1.5%)};
      --#{$variable-prefix}table-active-color: #{$body-bg-light};
      --#{$variable-prefix}table-active-bg: #{lighten($primary-darker, 6%)};
      --#{$variable-prefix}table-hover-color: #{$body-bg-light};
      --#{$variable-prefix}table-hover-bg: #{darken($primary-darker, 2.5%)};

      color: $body-bg-light;
      border-color: darken($primary-darker, 6%);
    }

    .table > :not(:last-child) > :last-child > * {
      border-bottom-color: darken($primary-darker, 6%);
    }

    @include table-variant("primary", rgba(shade-color($primary, 20%), 0.75));
    @include table-variant("info", rgba(#1e3a8a, 0.75));
    @include table-variant("success", rgba(#14532d, 0.75));
    @include table-variant("danger", rgba(#7f1d1d, 0.75));
    @include table-variant("warning", rgba(#713f12, 0.75));

    // Forms
    .form-text {
      color: darken($body-bg-dark, 30%);
    }

    .form-control::placeholder {
      color: darken($body-bg-dark, 40%);
    }

    .form-floating > .form-control::placeholder {
      color: transparent;
    }

    .form-control,
    .form-select {
      color: darken($body-bg-dark, 10%);
      background-color: darken($primary-darker, 4.5%);
      border-color: lighten($primary-darker, 8%);

      &:focus {
        color: $white;
        background-color: darken($primary-darker, 4.5%);
        border-color: $primary;
      }

      &:disabled,
      &[readonly] {
        background-color: lighten($primary-darker, 2%);
        border-color: lighten($primary-darker, 2%);
      }
    }

    .form-select {
      &:focus::-ms-value {
        color: darken($body-bg-dark, 10%);
        background-color: darken($primary-darker, 4.5%);
      }
    }

    .form-control-plaintext {
      color: darken($body-bg-dark, 10%);
    }

    @include form-validation-state(
      "valid",
      lighten($success, 10%),
      $form-feedback-icon-valid
    );
    @include form-validation-state(
      "invalid",
      lighten($danger, 15%),
      $form-feedback-icon-invalid
    );

    .form-control.form-control-alt {
      color: darken($body-bg-dark, 10%);
      border-color: darken($primary-darker, 3%);
      background-color: darken($primary-darker, 3%);

      &:focus {
        color: $white;
        border-color: darken($primary-darker, 4.5%);
        background-color: darken($primary-darker, 4.5%);
        box-shadow: none;
      }

      &.is-valid {
        &::placeholder {
          color: rgba($white, 0.5);
        }

        border-color: rgba(#14532d, 0.85);
        background-color: rgba(#14532d, 0.85);

        &:focus {
          border-color: rgba(#14532d, 1);
          background-color: rgba(#14532d, 1);
        }
      }

      &.is-invalid {
        &::placeholder {
          color: rgba($white, 0.5);
        }

        border-color: rgba(#7f1d1d, 0.85);
        background-color: rgba(#7f1d1d, 0.85);

        &:focus {
          border-color: rgba(#7f1d1d, 1);
          background-color: rgba(#7f1d1d, 1);
        }
      }
    }

    .input-group-text {
      color: darken($body-bg-dark, 10%);
      background-color: darken($primary-darker, 3%);
      border-color: lighten($primary-darker, 8%);
    }

    .input-group-text.input-group-text-alt {
      background-color: darken($primary-darker, 4.5%);
      border-color: darken($primary-darker, 4.5%);
    }

    .is-valid ~ .valid-feedback,
    .is-valid ~ .valid-tooltip,
    .was-validated :valid ~ .valid-feedback,
    .was-validated :valid ~ .valid-tooltip,
    .is-invalid ~ .invalid-feedback,
    .is-invalid ~ .invalid-tooltip,
    .was-validated :invalid ~ .invalid-feedback,
    .was-validated :invalid ~ .invalid-tooltip {
      display: block;
    }

    .form-check-input {
      background-color: darken($primary-darker, 3%);
      border-color: lighten($primary-darker, 8%);

      &:focus {
        border-color: $primary;
      }

      &:checked {
        background-color: $primary;
        border-color: $primary;
      }
    }

    .form-block {
      .form-check-label {
        border-color: lighten($primary-darker, 8%);

        &:hover {
          border-color: lighten(lighten($primary-darker, 4.5%), 5%);
        }

        &::before {
          background-color: $primary;
        }
      }

      .form-check-input:checked ~ .form-check-label {
        border-color: $primary;
      }

      .form-check-input:focus ~ .form-check-label {
        border-color: $primary;
        box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
      }

      .form-check-input:disabled:not([checked]) + .form-check-label:hover,
      .form-check-input[readonly]:not([checked]) + .form-check-label:hover {
        border-color: darken($primary-darker, 4.5%);
      }
    }

    // Breadcrumb
    .breadcrumb-item + .breadcrumb-item::before {
      color: rgba($white, 0.15);
    }

    .breadcrumb.breadcrumb-alt {
      .breadcrumb-item + .breadcrumb-item::before {
        color: rgba($white, 0.15);
      }
    }

    // Alerts
    .alert-primary {
      @include alert-variant($primary, $primary, $white, false);
    }

    .alert-secondary {
      @include alert-variant(
        lighten($primary-darker, 6%),
        lighten($primary-darker, 6%),
        $white,
        false
      );
    }

    .alert-success {
      @include alert-variant(
        shade-color($success, 25%),
        shade-color($success, 25%),
        $white,
        false
      );
    }

    .alert-info {
      @include alert-variant(
        shade-color($info, 25%),
        shade-color($info, 25%),
        $white,
        false
      );
    }

    .alert-warning {
      @include alert-variant(
        shade-color($warning, 25%),
        shade-color($warning, 25%),
        $white,
        false
      );
    }

    .alert-danger {
      @include alert-variant(
        shade-color($danger, 25%),
        shade-color($danger, 25%),
        $white,
        false
      );
    }

    .alert-dark {
      @include alert-variant(
        darken($primary-darker, 6%),
        darken($primary-darker, 6%),
        $white,
        false
      );
    }

    .alert-light {
      @include alert-variant(
        lighten($primary-darker, 12%),
        lighten($primary-darker, 12%),
        $white,
        false
      );
    }

    .btn-close {
      filter: $btn-close-white-filter;
    }

    // Progress Bars
    .progress {
      background-color: darken($primary-darker, 4.5%);
    }

    // Lists
    .list-activity > li:not(:last-child) {
      border-bottom-color: darken($primary-darker, 4.5%);
    }

    // Modals
    .modal-content {
      background: $primary-darker;
    }

    // Toasts
    .toast {
      background-color: $primary-darker;
    }

    .toast-header {
      color: darken($body-bg-dark, 10%);
      background-color: lighten($primary-darker, 6%);
    }

    // Borders
    .border {
      border-color: lighten($primary-darker, 6%) !important;
    }

    .border-top {
      border-top-color: lighten($primary-darker, 6%) !important;
    }

    .border-end {
      border-right-color: lighten($primary-darker, 6%) !important;
    }

    .border-bottom {
      border-bottom-color: lighten($primary-darker, 6%) !important;
    }

    .border-start {
      border-left-color: lighten($primary-darker, 6%) !important;
    }

    .border-primary {
      border-color: $primary !important;
    }
    .border-white {
      border-color: $white !important;
    }
    .border-white-op {
      border-color: rgba($white, 0.1) !important;
    }
    .border-black-op {
      border-color: rgba($black, 0.1) !important;
    }

    // Blocks
    .block {
      background-color: $primary-darker;
      box-shadow: 0 1px 2px rgba(darken($primary-darker, 4%), 0.5),
        0 1px 2px rgba(darken($primary-darker, 4%), 0.5);

      &.block-bordered {
        border: 1px solid lighten($primary-darker, 6%);
        box-shadow: none;
      }

      .block-header-default {
        background-color: lighten($primary-darker, 6%) !important;
      }

      .block-title {
        small {
          color: darken($body-bg-light, 30%);
        }
      }

      &.block-mode-loading::after {
        color: $white;
      }

      &.block-transparent {
        background-color: transparent;
        box-shadow: none;
      }

      &.block-mode-fullscreen {
        &.block-transparent {
          background-color: $primary-darker;
        }
      }
    }

    .block .block,
    .content-side .block {
      box-shadow: none;
    }

    a.block {
      color: darken($body-bg-dark, 10%);

      &.block-link-pop {
        &:hover {
          box-shadow: 0 0.5rem 2.5rem darken($primary-darker, 8%);
        }

        &:active {
          box-shadow: 0 0.375rem 0.55rem darken($primary-darker, 1%);
        }
      }

      &.block-link-shadow {
        &:hover {
          box-shadow: 0 0 1.5rem darken($primary-darker, 8%);
        }

        &:active {
          box-shadow: 0 0 0.75rem darken($primary-darker, 5%);
        }
      }
    }

    .btn-block-option {
      color: darken($body-bg-light, 30%);

      .block-header-default & {
        color: darken($body-bg-light, 35%);
      }

      &:hover,
      &:focus {
        color: darken($body-bg-light, 40%);
      }

      &:active {
        color: darken($body-bg-light, 30%);
      }
    }

    a.btn-block-option:focus,
    .active > a.btn-block-option,
    .show > button.btn-block-option {
      color: darken($body-bg-light, 40%);
    }

    .block.block-themed {
      .btn-block-option,
      .btn-block-option:hover,
      .btn-block-option:focus,
      .btn-block-option:active,
      a.btn-block-option:focus,
      .active > a.btn-block-option,
      .show > button.btn-block-option {
        color: $white;
      }
    }

    // Timeline
    .timeline::before {
      background-color: lighten($primary-darker, 6%);
    }

    .timeline-event-icon {
      box-shadow: 0 0.375rem 1.5rem $primary-darker;
    }

    @include media-breakpoint-up(xl) {
      .timeline-centered {
        .timeline-event-time {
          background-color: lighten($primary-darker, 6%);
        }
      }
    }

    // Images
    .img-thumb {
      background-color: darken($primary-darker, 6%);
    }

    // CKEditor 5
    .ck.ck-editor {
      color: $body-color;
    }

    // DropzoneJS
    .dropzone {
      background-color: lighten($primary-darker, 3%);
      border-color: lighten($primary-darker, 6%);

      .dz-message {
        color: darken($body-bg-dark, 10%);
      }

      &:hover {
        background-color: lighten($primary-darker, 6%);
        border-color: $primary;

        .dz-message {
          color: $primary;
        }
      }

      .dz-preview.dz-image-preview {
        background-color: transparent;
      }
    }

    // FullCalendar
    .fc-theme-standard {
      a {
        color: darken($body-bg-dark, 15%);
      }

      .fc-button-primary {
        color: darken($body-bg-dark, 15%);
        background-color: darken($primary-darker, 4.5%);
        border-color: darken($primary-darker, 4.5%);

        &:not(:disabled):hover {
          color: darken($body-bg-dark, 10%);
          background-color: lighten($primary-darker, 3%);
          border-color: lighten($primary-darker, 3%);
        }

        &:not(:disabled).fc-button-active,
        &:not(:disabled):active {
          color: darken($body-bg-dark, 10%);
          background-color: lighten($primary-darker, 3%);
          border-color: lighten($primary-darker, 3%);
        }

        &:focus,
        &:not(:disabled).fc-button-active:focus,
        &:not(:disabled):active:focus {
          box-shadow: 0 0 0 0.2rem rgba($primary, 0.4);
        }
      }

      .fc-list,
      .fc-scrollgrid,
      th,
      td {
        border-color: darken($primary-darker, 6%);
      }

      .fc-list-day-cushion,
      .fc-col-header-cell {
        background-color: lighten($primary-darker, 3%);
      }

      .fc-list-event:hover td {
        background-color: darken($primary-darker, 2.5%);
      }
    }

    // Flatpickr
    .flatpickr-input.form-control:disabled,
    .flatpickr-input.form-control[readonly],
    .input.form-control:disabled,
    .input.form-control[readonly] {
      color: darken($body-bg-dark, 10%);
      background-color: darken($primary-darker, 4.5%);
      border-color: lighten($primary-darker, 8%);
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover,
    .flatpickr-day.selected.prevMonthDay,
    .flatpickr-day.startRange.prevMonthDay,
    .flatpickr-day.endRange.prevMonthDay,
    .flatpickr-day.selected.nextMonthDay,
    .flatpickr-day.startRange.nextMonthDay,
    .flatpickr-day.endRange.nextMonthDay {
      border-color: $primary;
      background: $primary;
    }

    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
      fill: $primary;
    }

    // Vueform Slider
    --slider-bg: #{darken($primary-darker, 4.5%)};

    // Vue Select
    .vs__dropdown-toggle,
    .vs__dropdown-menu {
      border-color: lighten($primary-darker, 8%);
    }

    .vs__selected {
      background: darken($primary-darker, 3%);
      border-color: darken($primary-darker, 3%);
    }

    .vs__search::placeholder {
      color: darken($body-bg-dark, 40%);
    }

    .vs__selected {
      background-color: lighten($primary-darker, 8%);
      color: darken($body-bg-light, 30%);
    }

    .vs__search {
      color: darken($body-bg-dark, 10%);
    }
  }
}
