/* :root,
[data-light=light] {
  --h-factor: 203;
  --s-factor: 1;
  --l-factor: 1;
} */

.navbar {
  height: fit-content;

  .container.quickmenu-editor {
    outline: 2px dashed var(--border-color);
  }

  .container:first-child {
    height: 48px;
  }

  ul,
  li {
    list-style: none;
  }

  .si-nav-menu-main {
    justify-content: start;
    gap: 2px;
    position: relative;
    margin-top: 3px;
    margin-bottom: 3px;
    display: flex;
    flex-wrap: wrap;

    &:empty {
      display: none;
    }

    .si-edit-menu,
    .si-save-menu {
      margin-left: auto;
    }

    .si-nav-item-main {
      position: relative;
      padding: 4px 10px;
      border-radius: var(--border-radius);
      font-size: var(--text-base);
      font-weight: var(--weight-regular);
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background-color 50ms ease-in-out;
      &:hover {
        background-color: var(--btn-default-hover-bg);
      }
    }
  }

  .si-nav-item-main::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.125rem;
    background: transparent;
  }

  .si-nav-item-main > .si-nav-menu {
    left: 0;
    top: 100%;
  }
  .si-nav-item > .si-nav-menu {
    left: 100%;
  }

  .si-nav-item-main:hover > .si-nav-menu,
  .si-nav-item-main:focus > .si-nav-menu {
    display: block;
  }
  .si-nav-menu.show {
    display: block !important;
  }
  .si-nav-item:hover > .si-nav-menu {
    display: block;
  }

  .si-nav-item {
    position: relative;

    &[aria-haspopup="true"]::after {
      position: absolute;
      right: 8px;
      top: 50%;
      content: var(--right-arrow-svg);
      transform: translateY(-50%);
      margin-right: 0.5em;
    }

    .si-nav-menu {
      left: 100%;
      top: 0;
    }
  }

  .si-nav-group {
    font-weight: 600;
    font-size: var(--text-tiny);
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 8px;
    &:not(:first-child) {
      padding-top: 4px;
    }
  }

  .si-nav-seperator {
    height: 0;
    margin: 4px 8px;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
  }

  .si-nav-menu {
    position: absolute;
    padding: 4px 0px;
    box-shadow: 0px 9px 26px -5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: none;
    overflow: visible;
  }
  .si-nav-menu {
    .si-nav-item {
      padding: 3px 8px;
      &:hover {
        background-color: var(--btn-default-bg);
      }
    }
    .si-add-menu-item {
      padding: 3px 5px;
      margin: 0 4px;
      margin-top: 6px;
      border-radius: 4px;
      background-color: var(--control-bg);
      border: 2px dashed var(--scrollbar-thumb-color);

      .icon {
        margin-right: 5px;
        stroke: var(--text-color);
      }

      & > span {
        font-size: var(--text-2xs);
        font-weight: 600;
      }
    }
  }

  .si-nav-item {
    display: flex;
  }
}

@media (min-width: 992px) {
  [data-page-route="Workspaces"] .layout-main .layout-main-section {
    border: none;
  }
}

[data-theme="dark"] {
  --saffron: #ff9933;
  --gray-900: hsl(208, 26.5%, 14%);
  --gray-800: hsl(208, 24%, 15%);
  --gray-700: hsl(208, 23%, 17%);
  --gray-600: hsl(208, 17%, 27%);
  --gray-500: hsl(208, 14%, 40%);
  --gray-400: hsl(208, 5%, 60%);
  --gray-300: hsl(208, 5%, 55%);
  --gray-200: hsl(208, 3%, 50%);
  --gray-100: hsl(208, 12%, 52%);
  --gray-50: hsl(208, 5%, 75%);

  #navbar-breadcrumbs li.disabled a {
    color: var(--gray-200);
  }

  --neutral: var(--neutral-black);
  --invert-neutral: var(--neutral-white);
  --text-neutral: var(--gray-50);
  --text-dark: var(--gray-900);
  --text-muted: var(--gray-400);
  --text-light: var(--gray-300);
  --text-color: var(--gray-50);
  --heading-color: var(--gray-50);
  --icon-fill: transparent;
  --icon-stroke: var(--gray-300);
  --error-bg: var(--red-800);
  --error-border: var(--red-400);
  --bg-color: #12191f;
  --fg-color: hsl(208, 26%, 13%);
  --subtle-accent: var(--gray-700);
  --subtle-fg: hsl(208, 25%, 16%);
  --navbar-bg: hsl(208, 27%, 12.5%);
  --fg-hover-color: hsl(208, 26%, 15%);
  --card-bg: hsl(208, 26%, 13%);
  --disabled-text-color: var(--gray-400);
  --disabled-control-bg: hsl(208, 26%, 15%);
  --control-bg: #1d2830;
  --control-bg-on-gray: hsl(208, 26%, 15%);
  --awesomebar-focus-bg: var(--control-bg);
  --awesomplete-hover-bg: hsl(208, 26%, 15%);
  --modal-bg: var(--gray-900);
  --toast-bg: var(--modal-bg);
  --popover-bg: var(--card-bg);
  --btn-default-bg: hsl(208, 26%, 15%);
  --btn-default-hover-bg: hsl(208, 25%, 16%);
  --btn-primary: white;
  --border-primary: var(--gray-200);
  --bg-blue: var(--blue-600);
  --bg-light-blue: var(--blue-600);
  --bg-dark-blue: var(--blue-900);
  --bg-green: var(--green-900);
  --bg-yellow: var(--yellow-700);
  --bg-orange: var(--orange-700);
  --bg-red: var(--red-600);
  --bg-gray: var(--gray-600);
  --bg-grey: var(--gray-600);
  --bg-darkgrey: var(--gray-600);
  --bg-dark-gray: var(--gray-500);
  --bg-light-gray: hsl(208, 26%, 15%);
  --bg-purple: var(--purple-700);
  --bg-pink: var(--pink-700);
  --bg-cyan: var(--cyan-800);
  --text-on-blue: var(--blue-50);
  --text-on-light-blue: var(--blue-50);
  --text-on-dark-blue: var(--blue-300);
  --text-on-green: var(--green-100);
  --text-on-yellow: var(--yellow-50);
  --text-on-orange: var(--orange-100);
  --text-on-red: var(--red-50);
  --text-on-gray: var(--gray-50);
  --text-on-grey: var(--gray-50);
  --text-on-darkgrey: var(--gray-200);
  --text-on-dark-gray: var(--gray-200);
  --text-on-light-gray: var(--gray-100);
  --text-on-purple: var(--purple-100);
  --text-on-pink: var(--pink-100);
  --text-on-cyan: var(--cyan-100);
  --alert-text-danger: var(--red-300);
  --alert-text-warning: var(--yellow-300);
  --alert-text-info: var(--blue-300);
  --alert-text-success: var(--green-300);
  --alert-bg-danger: var(--red-900);
  --alert-bg-warning: var(--yellow-900);
  --alert-bg-info: var(--blue-900);
  --alert-bg-success: var(--green-900);
  --sidebar-select-color: hsl(208, 26%, 15%);
  --scrollbar-thumb-color: var(--gray-600);
  --scrollbar-track-color: hsl(208, 25%, 16%);
  --timeline-badge-color: var(--gray-500);
  --timeline-badge-bg: var(--gray-900);
  --shadow-inset: var(--fg-color);
  --border-color: var(--subtle-fg);
  --dark-border-color: var(--gray-600);
  --table-border-color: var(--border-color);
  --highlight-color: hsl(208, 25%, 16%);
  --yellow-highlight-color: var(--yellow-700);
  --btn-group-border-color: hsl(208, 25%, 16%);
  --placeholder-color: hsl(208, 25%, 16%);
  --highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
  --shadow-base: 0px 4px 8px rgba(114, 176, 233, 0.06), 0px 0px 4px rgba(112, 172, 228, 0.12);
  --diff-added: var(--green-800);
  --diff-removed: var(--red-800);
  --input-disabled-bg: none;
  --checkbox-color: var(--neutral-white);
  --checkbox-gradient: linear-gradient(180deg, var(--neutral-white) -124.51%, var(--neutral-white) 100%);
  --checkbox-disabled-gradient: linear-gradient(180deg, var(--gray-600) -124.51%, var(--gray-600) 100%);
  --checkbox-focus-shadow: var(--focus-default);
  --switch-bg: var(--gray-500);
  --date-active-text: var(--gray-100);
  --date-active-bg: hsl(208, 25%, 16%);
  --date-range-bg: var(--subtle-fg);
  color-scheme: dark;
  --skeleton-bg: hsl(208, 26%, 15%);
  --right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --left-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
}
.btn.btn-primary,
div#driver-popover-item .driver-popover-footer button.btn-primary,
div#driver-popover-item .driver-popover-footer button.driver-next-btn {
}
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] div#driver-popover-item .driver-popover-footer button.driver-next-btn:active,
div#driver-popover-item .driver-popover-footer [data-theme="dark"] button.driver-next-btn:active {
}

[data-theme="dark"] .modal-backdrop {
  background-color: hsl(208, 18%, 8%);
}

[data-theme="dark"] .page-title .sidebar-toggle-btn {
  --icon-stroke: var(--gray-300);
}
[data-theme="dark"] input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), var(--checkbox-gradient);
}
[data-theme="dark"] input[type="checkbox"].disabled-selected,
[data-theme="dark"] input[type="checkbox"]:disabled:checked {
  background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), var(--checkbox-disabled-gradient);
}
[data-theme="dark"] input[type="checkbox"].disabled-deselected {
  border: none;
  background-color: var(--gray-700);
}
[data-theme="dark"] .grid-body .editable-row {
  --control-bg: var(--gray-900);
  --input-disabled-bg: var(--gray-800);
}
[data-theme="dark"] .frappe-card .btn-default {
  background-color: var(--control-bg);
}
[data-theme="dark"] .frappe-card .btn-default:hover {
  background-color: var(--fg-hover-color);
}
[data-theme="dark"] .modal,
[data-theme="dark"] .form-in-grid {
  --control-bg: var(--gray-800);
  --border-color: var(--gray-800);
}
[data-theme="dark"] .print-format {
  --text-color: var(--gray-900);
  --border-color: var(--gray-100);
}
[data-theme="dark"] .ql-editor {
  color: var(--text-on-gray);
}
[data-theme="dark"] .ql-editor.read-mode span:not(.mention),
[data-theme="dark"] .ql-editor.read-mode p,
[data-theme="dark"] .ql-editor.read-mode u,
[data-theme="dark"] .ql-editor.read-mode strong {
  background-color: inherit !important;
  color: inherit !important;
}
[data-theme="dark"] .comment-input-wrapper .ql-editor.ql-blank::before {
  color: var(--text-color);
}
[data-theme="dark"] .chart-container {
  --charts-label-color: var(--gray-300);
  --charts-axis-line-color: var(--subtle-fg);
  --charts-stroke-width: 5px;
  --charts-dataset-circle-stroke: #ffffff;
  --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
  --charts-tooltip-title: var(--charts-label-color);
  --charts-tooltip-label: var(--charts-label-color);
  --charts-tooltip-value: white;
  --charts-tooltip-bg: var(--gray-900);
  --charts-legend-label: var(--charts-label-color);
}
[data-theme="dark"] .heatmap-chart g > rect[fill="#ebedf0"] {
  fill: var(--gray-700);
}
[data-theme="dark"] .rating {
  --star-fill: var(--gray-500);
}
[data-theme="dark"] .rating .star-hover {
  --star-fill: var(--gray-400);
}
[data-theme="dark"] ::-moz-selection {
  color: var(--text-color);
  background: var(--gray-500);
}
[data-theme="dark"] ::selection {
  color: var(--text-color);
  background: var(--gray-500);
}
[data-theme="dark"] .indicator {
  --indicator-dot-green: var(--bg-green);
}
[data-theme="dark"] .indicator {
  --indicator-dot-cyan: var(--bg-cyan);
}
[data-theme="dark"] .indicator {
  --indicator-dot-blue: var(--bg-blue);
}
[data-theme="dark"] .indicator {
  --indicator-dot-orange: var(--bg-orange);
}
[data-theme="dark"] .indicator {
  --indicator-dot-yellow: var(--bg-yellow);
}
[data-theme="dark"] .indicator {
  --indicator-dot-gray: var(--bg-gray);
}
[data-theme="dark"] .indicator {
  --indicator-dot-grey: var(--bg-grey);
}
[data-theme="dark"] .indicator {
  --indicator-dot-red: var(--bg-red);
}
[data-theme="dark"] .indicator {
  --indicator-dot-pink: var(--bg-pink);
}
[data-theme="dark"] .indicator {
  --indicator-dot-darkgrey: var(--bg-darkgrey);
}
[data-theme="dark"] .indicator {
  --indicator-dot-purple: var(--bg-purple);
}
[data-theme="dark"] .indicator {
  --indicator-dot-light-blue: var(--bg-light-blue);
}

/* 
[data-theme=light] #navbar-breadcrumbs li a {
  color: var(--gray-200)
} */
/* [data-theme=light] #navbar-breadcrumbs li.disabled a {
  color: color-mix(in srgb, var(--gray-300) 75%, var(--primary) 25%);
} */