// 
// dark-mode.scss
// Theme Component
// Dark mode related CSS

[data-bs-theme="dark"] {

    // //Dark mode styles
      --bs-light: #292a2d;
      --bs-gray-100: #1f2122;
      --bs-gray-200: #3c3e41;
      --bs-gray-300: #5f5f68;
      --bs-gray-400: #a1a1a8;
      --bs-gray-500: #bfc0c9;
      --bs-gray-600: #c5c6cc;
      --bs-gray-700: #ffffffb3;
      --bs-gray-800: #ffffffd9;
      --bs-gray-900: #fff;
      --bs-body-bg: #161618;
      --bs-body-bg-rgb: #161618;
      --bs-body-color: #c4c5c7;
      --bs-heading-color: var(--bs-gray-900);
      --bs-mode:#191b1d;
      --bs-border-color: rgba(255, 255, 255, 0.07);
  
      body, p, ul, ol {
        color: var(--#{$prefix}body-color);
      }
  
      .navbar {
      --bs-navbar-color: var(--#{$prefix}gray-800);
      --bs-navbar-hover-color: var(--#{$prefix}primary);
      --bs-navbar-disabled-color: var(--#{$prefix}gray-400);
      --bs-navbar-active-color: var(--#{$prefix}primary);
      }
  
      .navbar-light-static .theme-icon-active svg{
        fill: var(--#{$prefix}gray-900);
      }
      .navbar-light-static .theme-icon-active .nav-link.active svg{
        fill: var(--#{$prefix}primary);
      }
      .nav{
        --bs-nav-link-color: var(--#{$prefix}gray-600);
      }
      .dropdown-menu {
        --bs-dropdown-bg: var(--bs-mode);
        --bs-dropdown-link-hover-color: var(--#{$prefix}primary);
        --bs-dropdown-link-active-color: var(--#{$prefix}primary);
        --bs-dropdown-link-disabled-color: var(--#{$prefix}gray-200);
        box-shadow:none;
        border: 1px solid var(--#{$prefix}border-color);
      }
  
      .btn-link {
        --bs-link-color: var(--#{$prefix}primary);
        --bs-btn-hover-color: var(--#{$prefix}link-hover-color);
        --bs-btn-active-color: var(--#{$prefix}link-hover-color);
      }
      .modal {
        --bs-modal-bg: var(--#{$prefix}body-bg);
        --bs-modal-border-color: var(--#{$prefix}border-color-translucent);
        --bs-modal-footer-border-color: var(--#{$prefix}border-color);
      }
      .table-light {
        --bs-table-bg: var(--#{$prefix}light);
        --bs-table-color: var(--#{$prefix}gray-900);
      }
      .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
        --bs-offcanvas-bg: var(--#{$prefix}body-bg);
      }
      .nav-pills {
        --bs-nav-pills-link-active-bg: var(--#{$prefix}primary);
      }
     .card{
      --bs-card-cap-bg: var(--#{$prefix}mode);
      --bs-card-bg: var(--#{$prefix}mode);
     }
  
     header.header-sticky-on {
      border-bottom: $border-width solid var(--#{$prefix}border-color);
     }
      
      // Alert
      @each $color, $value in $theme-colors {
        .alert-#{$color} {
          --#{$prefix}alert-bg: rgba(#{to-rgb($value)}, .05);
          --#{$prefix}alert-border-color: rgba(#{to-rgb($value)}, .25);
          --#{$prefix}alert-color: rgba(#{to-rgb($value)}, 0.8);
        }
      }
  
      .alert-dark {
        --#{$prefix}alert-color: var(--#{$prefix}gray-700);
        --#{$prefix}alert-border-color: var( --#{$prefix}border-color);
      }
      
      .alert-light{
        --#{$prefix}alert-bg: var(--#{$prefix}light);
        --#{$prefix}alert-color: var(--#{$prefix}body-color);
        --#{$prefix}alert-link-color: #{$white};
        --#{$prefix}alert-border-color: var( --#{$prefix}gray-200);
      }
      .alert-secondary{
        --#{$prefix}alert-bg: rgba(var(--#{$prefix}secondary-rgb), 0.2);
        --#{$prefix}alert-color: var(--#{$prefix}body-color);
        --#{$prefix}alert-link-color: #{$white};
        --#{$prefix}alert-border-color: var( --#{$prefix}border-color);
      }
  
      .btn-outline-dark{
        --bs-btn-color: var(--#{$prefix}gray-300);
        --bs-btn-border-color: var(--#{$prefix}gray-300);
      }
  
      // Input group text border
      .input-group {
        .input-group-text {
          &:first-of-type:not(:last-child) {
            border-right-color: transparent;
          }
          &:last-of-type:not(:first-child) {
            border-left-color: transparent;
          }
        }
      }
  
      // Floting label bg color
      .input-floating-label.form-floating > .form-control:focus ~ label,
      .input-floating-label.form-floating > .form-control:not(:placeholder-shown) ~ label,
      .input-floating-label.form-floating > .form-control-plaintext ~ label,
      .input-floating-label.form-floating > .form-select ~ label{
        background: var(--#{$prefix}mode);
      }
      .input-floating-label.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
      .input-floating-label.form-floating > .form-control:focus ~ label::after, 
      .input-floating-label.form-floating > .form-control:not(:placeholder-shown) ~ label::after, 
      .input-floating-label.form-floating > .form-control-plaintext ~ label::after, 
      .input-floating-label.form-floating > .form-select ~ label::after {
        background: var(--#{$prefix}mode);
      }
  
      .form-control:focus{
        border-color: var(--#{$prefix}gray-300);
        box-shadow: 0 7px 15px 3px rgba(42, 44, 46, 0.3);
      }
      .form-control.focus-shadow-none:focus{
        box-shadow: none;
      }
      .form-select:focus{
        border-color: var(--#{$prefix}gray-300);
        box-shadow: 0 7px 15px 3px rgba(42, 44, 46, 0.3);
      }
      .form-select.focus-shadow-none:focus{
        box-shadow: none;
      }
      .bg-light{
        background-color: var(--#{$prefix}light) !important;
      }
      .fill-light{
        fill: var(--#{$prefix}light) !important;
      }
      .border-light{
        border-color: var(--#{$prefix}light) !important
      }
      .bg-body{
        background-color: var(--#{$prefix}body-bg) !important;
      }
      .shadow, .shadow-lg, .shadow-sm{
        box-shadow: none !important;
      }
      .navbar-nav .dropdown .dropdown-submenu:hover>.dropdown-menu {
        box-shadow: none;
      }
      .btn-close {
        filter: invert(1) grayscale(100%) brightness(300%);
      }
      .form-check-input:checked {
        background-color: var(--#{$prefix}primary);
        border-color: var(--#{$prefix}primary);
      }
  
      .text-primary-hover {
        a {
          color: var(--#{$prefix}gray-600);
        }
      }
      
      .text-primary-hover {
        li {
        color: var(--#{$prefix}gray-600) !important;
      }
    }
  
    // Mobile color
    .iphone-x{
      background-color: var(--#{$prefix}gray-200);
      box-shadow: 0px 0px 0px 11px var(--#{$prefix}gray-200), 0px 0px 0px 13px var(--#{$prefix}gray-200), 0px 0px 0px 10px shade-color($dark, 20%),  0px 5px 7px 13px rgba($gray-200, 0.04);
      // frontal camera/speaker frame
      &:before{
        background-color: var(--#{$prefix}gray-200);
      }
      // speaker
      i{
        background-color: $black;
        box-shadow: inset 0px -3px 3px 0px rgba(256, 256, 256, 0.2);
      }
      // camera
      b{
        background-color: $black;
        box-shadow: inset 0px -3px 2px 0px rgba(256, 256, 256, 0.2);
      }
    }
  
    // Accordion border
  .accordion.accordion-border {
    .accordion-button {
      &[aria-expanded=true]{
        color: var(--#{$prefix}gray-100);
      }
      &[aria-expanded=true]:before {
        background: var(--#{$prefix}gray-100) !important;
      }
      &[aria-expanded=true]:after {
        background: var(--#{$prefix}gray-100) !important;
      }
    }
  }
  }
  
  // Dark mode item hide and show
  .dark-mode-item{
    display: none !important;
  }
  
  [data-bs-theme="dark"]{
    .dark-mode-item{
      display: inline-block !important;
    }
    .light-mode-item{
      display: none !important;
    }
  }