/*
* sidebar.css
* The vertical menu: section headers, the current row, the rhythm.
* Colors come from the --sb-* variables; vertical_menu.html sets them from
* Appearance and puts the layout choices on the <aside> as data-sb-*
* attributes. The #layout-menu id keeps these rules ahead of the theme's,
* whatever order the stylesheets end up in.
******************************************************************************/

:root {
  --sb-bg: #ffffff;
  --sb-text: #6f6b7d;
  --sb-text-strong: #5d596c;
  --sb-header: #a5a3ae;
  --sb-accent: #7367f0;
  --sb-line: rgba(75, 70, 92, 0.1);
  --sb-hover: rgba(75, 70, 92, 0.06);
}

html.dark-style {
  --sb-bg: #2f3349;
  --sb-text: #b6bee3;
  --sb-text-strong: #cfd3ec;
  --sb-header: #7983bb;
  --sb-accent: #a9a1f6;
  --sb-line: rgba(134, 146, 208, 0.16);
  --sb-hover: rgba(134, 146, 208, 0.08);
}

#layout-menu.menu-vertical {
  background-color: var(--sb-bg) !important;
  color: var(--sb-text);
}
#layout-menu.menu-vertical .menu-inner-shadow {
  background: linear-gradient(var(--sb-bg) 41%, transparent);
}

/* Brand */
#layout-menu.menu-vertical .app-brand.demo {
  border-bottom: 1px solid var(--sb-line);
}
#layout-menu[data-sb-divider="0"] .app-brand.demo {
  border-bottom: 0;
}
#layout-menu.menu-vertical .app-brand-text.demo {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--sb-text-strong);
}

/* Section headers */
#layout-menu.menu-vertical .menu-inner > .menu-header {
  padding: 1.125rem 1.75rem 0.375rem;
}
#layout-menu.menu-vertical .menu-inner > .menu-header:first-child {
  padding-top: 0.625rem;
}
#layout-menu.menu-vertical .menu-inner > .menu-header .menu-header-text {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sb-header);
}
#layout-menu[data-sb-headers="plain"] .menu-inner > .menu-header {
  text-transform: none !important;
}
#layout-menu[data-sb-headers="plain"] .menu-inner > .menu-header .menu-header-text {
  font-size: 0.75rem;
  letter-spacing: 0;
}
/* Settings sits at the foot when the menu is shorter than the screen */
#layout-menu.menu-vertical .menu-inner > .menu-header.menu-header-settings {
  margin-top: auto;
}
#layout-menu[data-sb-settings-bottom="0"] .menu-inner > .menu-header.menu-header-settings {
  margin-top: 0;
}

/* Rows */
#layout-menu.menu-vertical .menu-inner > .menu-item {
  margin: 1px 0;
}
#layout-menu.menu-vertical .menu-link {
  font-size: 0.875rem;
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  color: var(--sb-text);
}
#layout-menu.menu-vertical .menu-link .menu-icon {
  font-size: 1.125rem;
}
#layout-menu[data-sb-density="compact"] .menu-link {
  font-size: 0.8125rem;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
}
#layout-menu[data-sb-density="compact"] .menu-inner > .menu-header {
  padding-top: 0.875rem;
}
#layout-menu[data-sb-density="comfortable"] .menu-link {
  font-size: 0.9375rem;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}
#layout-menu[data-sb-density="comfortable"] .menu-inner > .menu-item {
  margin: 0.125rem 0;
}
#layout-menu.menu-vertical .menu-link:hover,
#layout-menu.menu-vertical .menu-link:focus {
  background: var(--sb-hover);
  color: var(--sb-text-strong);
}
#layout-menu.menu-vertical .menu-item.open > .menu-toggle {
  color: var(--sb-text-strong);
}
#layout-menu.menu-vertical .menu-inner .menu-item.active > .menu-link.menu-toggle {
  background: transparent;
  color: var(--sb-text-strong);
}

/* The current page: a tint with a rail on the left, or the theme's pill */
#layout-menu.menu-vertical .menu-inner > .menu-item.active:before {
  display: none;
}
#layout-menu.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: color-mix(in srgb, var(--sb-accent) 14%, transparent) !important;
  box-shadow: none !important;
  color: var(--sb-accent) !important;
  font-weight: 600;
}
#layout-menu.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 3px;
  border-radius: 3px;
  background: var(--sb-accent);
}
#layout-menu.menu-vertical .menu-sub .menu-item.active > .menu-link:not(.menu-toggle)::after {
  left: 0.75rem;
}
#layout-menu[data-sb-rail="0"] .menu-item.active > .menu-link:not(.menu-toggle)::after {
  display: none;
}
#layout-menu[data-sb-active="pill"] .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(72.47deg, var(--sb-accent) 22.16%, color-mix(in srgb, var(--sb-accent) 70%, transparent) 76.47%) !important;
  box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--sb-accent) 48%, transparent) !important;
  color: #fff !important;
}
#layout-menu[data-sb-active="pill"] .menu-item.active > .menu-link:not(.menu-toggle)::after {
  display: none;
}

/* Sub rows: a dot, a ring, or nothing */
#layout-menu.menu-vertical .menu-sub .menu-link {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
#layout-menu.menu-vertical .menu-sub > .menu-item > .menu-link:before {
  content: "";
  width: 5px;
  height: 5px;
  left: 1.5rem;
  top: 50%;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
#layout-menu.menu-vertical .menu-sub > .menu-item.active > .menu-link:before {
  opacity: 1;
}
#layout-menu[data-sb-marker="ring"] .menu-sub > .menu-item > .menu-link:before {
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  background: transparent;
  border: 1.5px solid currentColor;
}
#layout-menu[data-sb-marker="none"] .menu-sub > .menu-item > .menu-link:before {
  display: none;
}