// Dark theme overrides. Alphabetical-ish.
html.dark {
  $blue: lighten($blue, 20%);
  $primary: $blue;
  $secondary: lighten($secondary, 10%);

  // needed for "overscroll" bg color
  background: darken($gray-800, 12%) !important;

  body {
    color: darken($light, 10%) !important;
    .link-primary {
      color: $blue !important;
    }
    .link-primary:hover {
      color: lighten($blue, 15%) !important;
    }
    a:not(.btn) {
      color: $blue;
    }
    a:not(.btn):hover {
      color: lighten($blue, 15%);
    }
    .active:hover {
      color: $gray-200 !important;
    }
    .badge-light {
      background-color: $gray-800 !important;
    }
    .bg-light {
      background: darken($gray-800, 12%) !important;
    }
    .bg-white {
      background: $gray-900 !important;
    }
    .border-left {
      border-left-color: $gray-800 !important;
    }
    .border-right {
      border-right-color: $gray-800 !important;
    }
    .border-bottom {
      border-bottom-color: $gray-800 !important;
    }
    .border-top {
      border-top-color: $gray-800 !important;
    }
    .card {
      background: $gray-900 !important;
      border-color: $gray-800 !important;
    }
    code {
      background: rgba($green, 0.1);
      color: darken($green, 5%);
    }
    hr {
      border-top-color: $gray-800;
    }
    .search-form {
      background-color: $gray-900 !important;
      border-width: 1px;

      #search-input {
        background-color: $gray-900 !important;
        border-color: pink;
      }

      .form-control {
        color: $light;
      }
    }

    label.link-label {
      color: lighten($blue, 10%);
    }

    table {
      color: $light;
      th {
        border-bottom-color: $gray-800;
        border-top-color: $gray-800;
      }
      td {
        border-top-color: $gray-700;
      }
    }
    .text-dark {
      color: $light !important;
    }
    .text-muted {
      color: inherit !important;
    }
    $box-shadow-sm-dark: 0 0.125rem 0.25rem rgba($dark, 0.075) !default;
    $box-shadow-dark: 0 0.5rem 1rem rgba($dark, 0.15) !default;
    $box-shadow-lg-dark: 0 1rem 3rem rgba($dark, 0.175) !default;
    .shadow-sm {
      box-shadow: $box-shadow-sm-dark !important;
    }
    .shadow {
      box-shadow: $box-shadow-dark !important;
    }
    .shadow-lg {
      box-shadow: $box-shadow-lg-dark !important;
    }
    // logo
    svg #type {
      fill: $gray-100;
    }
    #Oval {
      fill: darken($orange, 10%);
    }
    //targeting the link icon svg
    path[d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"] {
      fill: $gray-500;
    }
    svg.opacity-2 {
      fill: $gray-100 !important;
      opacity: 0.5;
    }
    svg.opacity-1 {
      fill: $gray-100 !important;
      opacity: 0.5;
    }
    .sun {
      display: inline-block;
    }
    .moon {
      display: none;
    }
    //nav-column
    .nav-column {
      a {
        color: $gray-500 !important;
        &:hover {
          color: $gray-100 !important;
        }
      }
    }
    //inverting the fill colour using css
    .fill-black {
      fill: darken($light, 10%) !important;
    }
    //scrollbars
    ::-webkit-scrollbar {
      width: 7px;
    }
    ::-webkit-scrollbar-track {
      background: darken($gray-800, 12%);
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background: $gray-600;
      border-radius: 10px;
    }

    //red one
    .admonition-important {
      background-color: darken(#ffd8cc, 70%) !important;
      color: darken($light, 10%) !important;
    }
    .admonition-tip, .admonition-hint {
      background-color: darken(#e7f1db, 70%) !important;
      color: darken($light, 10%) !important;
    }
    .admonition-note, .admonition-seealso, .admonition-info {
      background-color: darken(#e4eef5, 70%) !important;
      color: darken($light, 10%) !important;
    }
    .admonition-warning {
      background-color: darken(#ffedd1, 70%) !important;
      color: darken($light, 10%) !important;
    }
    .admonition-danger {
      background-color: darken(#f0d3d3, 70%) !important;
      color: darken($light, 10%) !important;
    }
    .admonition-interactive {
      background-color: $gray-800 !important;
      color: darken($light, 10%) !important;
    }

    .admonition-heading h5:before {
      filter: invert(1);
    }
  }

  //Alert banner
  .topbar.alert-primary {
    background-color: $gray-800 !important;
    border-color: $gray-700 !important;
    border-left: none;
    border-right: none;
    color: $light;
  }

  //Close icon on search
  button.false.btn.btn-link {
    svg.opacity-5 {
      fill: $light;
    }
  }

  //Quick Search
  .quick-search-container {
    background: $gray-900;
    border-top-color: $gray-700;

    //highlight
    .dropdown-item.arrow-focus {
      background-color: rgba($orange, 0.1);
    }
    //dropdown item
    .dropdown-item,
    .search-prompt {
      color: $light;
    }
    .dropdown-item:hover,
    .dropdown-item:active,
    .dropdown-item:focus {
      background-color: $gray-800;
      color: $light !important;
    }
  }

  //Marks
  .search-content mark {
    color: rgba($orange, 0.5);
  }

  //Advanced search badge counts
  .search-filter-badge {
    background-color: $gray-800;
    color: $light;
  }
}

.sun,
.moon {
  position: relative;
  z-index: 1;
  top: 7px;
}

.sun {
  display: none;
  left: -33px;
}

.moon {
  display: inline-block;
  left: -21px;
}

// Bootstrap Switch component
.custom-control-label::before {
  border-color: $gray-500 !important;
  background-color: $gray-100 !important;
  cursor: pointer;
}

// toggle handle
.custom-switch .custom-control-label::after {
  background-color: $gray-500 !important;
}

.light .custom-switch .custom-control-label::after {
  background-color: $gray-300 !important;
}

.dark-mode-toggle {
  cursor: pointer !important;
}

// checked (dark)
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: $gray-800 !important;
  cursor: pointer !important;
}
