@import './_components/include-dark';
@import './_theme/common';
@import './_theme/libs';
@import './_theme/pages';
@import './_theme/_theme';

$primary-color: #696cff;

body {
  background: $body-bg;
}

.bg-body {
  background: $body-bg !important;
}

@include template-common-theme($primary-color);
@include template-libs-dark-theme($primary-color);
@include template-pages-theme($primary-color);

// Navbar
// ---------------------------------------------------------------------------
@include template-navbar-style('.bg-navbar-theme', #313246, $color: $headings-color, $active-color: $headings-color);
.layout-navbar {
  background-color: rgba($card-bg, 0.88) !important;
  backdrop-filter: saturate(200%) blur(6px);
}
.layout-navbar-fixed .layout-page:before {
  backdrop-filter: saturate(200%) blur(10px);
  background: linear-gradient(180deg, rgba($body-bg, 70%) 44%, rgba($body-bg, 43%) 73%, rgba($body-bg, 0%));
  -webkit-mask: linear-gradient($body-bg, $body-bg 18%, transparent 100%);
  mask: linear-gradient($body-bg, $body-bg 18%, transparent 100%);
}

// Menu
// ---------------------------------------------------------------------------
@include template-menu-style('.bg-menu-theme', #313246, $color: #d5d5e2, $active-color: $white, $border: transparent);

.bg-menu-theme {
  // Menu header
  .menu-header {
    color: $text-muted;
    &:before {
      background-color: $text-muted !important;
    }
  }

  // menu item open(vertical) & hover (vertical & horizontal)
  .menu-inner .menu-item.open > .menu-link,
  .menu-inner .menu-item .menu-link:not(.active):hover {
    html:not(.layout-menu-collapsed) &,
    .layout-menu-hover.layout-menu-collapsed & {
      background-color: rgba(#e6e6f1, 0.06);
    }
  }
  // menu item open(horizontal)
  .menu-inner .menu-sub > .menu-item.active {
    > .menu-link.menu-toggle {
      background-color: rgba(#e6e6f1, 0.08) !important;
    }
    &:not(:has(.menu-sub)) {
      .menu-icon {
        color: $primary-color;
      }
    }
  }

  // menu item active
  .menu-inner > .menu-item.active > .menu-link,
  &.menu-horizontal .menu-inner > .menu-item.active > .menu-sub > .menu-item.active:not(:has(.menu-sub)) > .menu-link {
    background-color: $primary-color !important;
    .menu-icon {
      color: $white !important;
    }
  }
  .menu-inner > .menu-item.active:before {
    background: $primary-color;
  }

  // Sub menu item link bullet
  .menu-sub > .menu-item > .menu-link:before {
    background-color: rgba-to-hex($gray-400, $rgba-to-hex-bg) !important;
  }
  // Sub menu item link active bullet
  .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
    background-color: $primary-color !important;
    border: 3px solid rgba-to-hex(rgba($primary-color, 0.16), $card-bg) !important;
  }
}

.app-brand .layout-menu-toggle {
  background-color: $primary-color;
  border: 7px solid $body-bg;
  i {
    color: color-contrast($primary-color);
  }
}

// Footer
// ---------------------------------------------------------------------------
@include template-footer-style('.bg-footer-theme', $card-bg, $color: $body-color, $active-color: $primary-color);