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

// $primary-color: #7367f0;
$body-bg: #f8f7fa;

body {
  background: $body-bg;
}

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

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

// Navbar
// ---------------------------------------------------------------------------
@include template-navbar-style('.bg-navbar-theme', $card-bg, $color: $body-color, $active-color: $headings-color);

.layout-navbar {
  box-shadow: 0 1px 0 $border-color;
  backdrop-filter: saturate(200%) blur(6px);
}
.menu-horizontal {
  backdrop-filter: saturate(200%) blur(6px);
}
.navbar-detached {
  box-shadow: 0 0 0.375rem 0.25rem rgba(rgba-to-hex($gray-500, $rgba-to-hex-bg), 0.15);
}
.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',
  // #242745,
  #000000,
  $color: rgba-to-hex($gray-300, $rgba-to-hex-bg),
  $active-color: rgba-to-hex($gray-200, $rgba-to-hex-bg),
  $active-bg: $primary-color
);
.bg-menu-theme {
  .menu-inner {
    .menu-item {
      &.open,
      &.active {
        > .menu-link.menu-toggle {
          &,
          .layout-menu-hover.layout-menu-collapsed & {
            background: #2f324e;
          }
        }
      }
      &:not(.active) .menu-link:hover {
        html:not(.layout-menu-collapsed) &,
        .layout-menu-hover.layout-menu-collapsed & {
          background: #2f324e;
        }
      }
    }
  }
  .menu-inner .menu-sub .menu-item:not(.active) > .menu-link::before {
    color: rgba-to-hex($gray-500, $rgba-to-hex-bg) !important;
  }
}

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

.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .content-footer .footer-container,
.layout-footer-fixed .layout-wrapper.layout-horizontal .content-footer {
  box-shadow: $box-shadow;
}

// Customization
// ---------------------------------------------------------------------------
$--bs-border-color:  #dbdade !important;

.separator {
  display: block;
  height: 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.separator.separator-dotted {
  border-bottom-style: dotted;
  border-bottom-color: var(--bs-border-color);
}
.separator.separator-dashed {
  border-bottom-style: dashed;
  border-bottom-color: var(--bs-border-color);
}
.separator.separator-content {
  display: flex;
  align-items: center;
  border-bottom: 0;
  text-align: center;
}
.separator.separator-content::before, .separator.separator-content::after {
  content: " ";
  width: 50%;
  border-bottom: 1px solid var(--bs-border-color);
}
.separator.separator-content::before {
  margin-right: 1.25rem;
}
.separator.separator-content::after {
  margin-left: 1.25rem;
}
.separator.separator-content.separator-dotted::before, .separator.separator-content.separator-dotted::after {
  border-bottom-style: dotted;
  border-bottom-color: var(--bs-border-color);
}
.separator.separator-content.separator-dashed::before, .separator.separator-content.separator-dashed::after {
  border-bottom-style: dashed;
  border-bottom-color: var(--bs-border-color);
}
.separator.separator-content.border-white::before, .separator.separator-content.border-white::after {
  border-color: #ffffff !important;
}
.separator.separator-content.border-light::before, .separator.separator-content.border-light::after {
  border-color: #F9F9F9 !important;
}
.separator.separator-content.border-primary::before, .separator.separator-content.border-primary::after {
  border-color: #009ef7 !important;
}
.separator.separator-content.border-secondary::before, .separator.separator-content.border-secondary::after {
  border-color: #E1E3EA !important;
}
.separator.separator-content.border-success::before, .separator.separator-content.border-success::after {
  border-color: #50cd89 !important;
}
.separator.separator-content.border-info::before, .separator.separator-content.border-info::after {
  border-color: #7239ea !important;
}
.separator.separator-content.border-warning::before, .separator.separator-content.border-warning::after {
  border-color: #ffc700 !important;
}
.separator.separator-content.border-danger::before, .separator.separator-content.border-danger::after {
  border-color: #f1416c !important;
}
.separator.separator-content.border-dark::before, .separator.separator-content.border-dark::after {
  border-color: #181C32 !important;
}

.flex-stack {
  justify-content: space-between;
  align-items: center;
}

.bg-menu-theme {
  &.menu-vertical {
    .menu-sub {
      > .menu-item {
        &.active div {
          color: #FFF !important;
        }

        &.subchildmenu {
          > .menu-link {
            &::after {
              right: 27px;
              position: absolute;
              content: "";
              top: 48%;
              border-top: 1px solid rgba(203, 204, 206, 0.57);
              border-top-color: rgba(203, 204, 206, 0.57);
            }

            &::before {
              position: absolute;
              content: "";
              width: 5px;
              height: 5px;
              top: 50%;
              -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
              left: 43px;
              border-radius: 100%;
              background: rgba(203, 204, 206, 0.57);
            }
          }

          > .menu-sub .menu-link {
            &::after {
              position: absolute;
              content: "";
              top: 48%;
              width: 16px;
              border: 0 !important;
            }
          }
        }

        &:not(.subchildmenu) {
          > .menu-link {
            &::before {
              position: absolute;
              content: "";
              width: 5px;
              height: 5px;
              top: 50%;
              -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
              left: 43px;
              border-radius: 100%;
              background: rgba(203, 204, 206, 0.57);
            }

            &::after {
              left: 27px;
              position: absolute;
              content: "";
              top: 48%;
              width: 16px;
              border-top: 1px solid rgba(203, 204, 206, 0.57);
              border-top-color: rgba(203, 204, 206, 0.57);
            }
          }
        }

        div {
          padding: 1px 5px;
          padding-left: 15px;
          font-size: 14px;
          color: rgba(203, 204, 206, 0.57);
          display: block;
          position: relative;
          letter-spacing: 0.06em;
          font-weight: 500;
          -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .menu-inner {
    > .menu-item.open {
      > .menu-sub {
        &::before {
          height: calc(100% - 12px) !important;
          -webkit-transition: height 0.5s !important;
          transition: height 0.5s !important;
          z-index: 1;
        }
      }
    }
  }
}

ul.menu-sub {
  width: 100%;
  padding: 0;
  position: relative !important;

  &::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 40px;
    border-radius: 100%;
    background: rgba(203, 204, 206, 0.57);
  }
}