/************************************************************
 * BOOTSTRAP
 * This is the minimum CSS from Bootstrap to make
 * the sidebar work. It's the dropdown and tooltip CSS.
 * All selectors have "#sidebar-menu" at the beginning to
 * scope the CSS to the sidebar.
 ***********************************************************/

/* General */

#sidebar-menu .fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  #sidebar-menu .fade {
    transition: none;
  }
}

#sidebar-menu .fade:not(.show) {
  opacity: 0;
}

#sidebar-menu .position-static {
  position: static !important;
}

/* Tooltip */
/* The CSS is copy pasted from Bootstrap, but we use custom class names to avoid conflicts */

.lens-sidebar-tooltip.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .lens-sidebar-tooltip.fade {
    transition: none;
  }
}

.lens-sidebar-tooltip.fade:not(.show) {
  opacity: 0;
}

.lens-sidebar-tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: /* 0.875rem */ 12px; /* Override Bootstrap's default value */
  word-wrap: break-word;
  opacity: 0;
}

.lens-sidebar-tooltip.show {
  opacity: 0.9;
}

.lens-sidebar-tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.lens-sidebar-tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.lens-sidebar-tooltip .tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

.lens-sidebar-tooltip.bs-tooltip-right, .lens-sidebar-tooltip.bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}

.lens-sidebar-tooltip.bs-tooltip-right .arrow, .lens-sidebar-tooltip.bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.lens-sidebar-tooltip.bs-tooltip-right .arrow::before, .lens-sidebar-tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

/* Dropdown */

#sidebar-menu .dropright {
  position: relative;
}

#sidebar-menu .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 4rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

#sidebar-menu .dropdown-menu-right {
  right: 0;
  left: auto;
}

#sidebar-menu .dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: calc(100% + 10px); /* +10px to avoid the dropdown showing up when the cursor is on the right edge of the screen */
  margin-top: 0;
  margin-left: 0.125rem;
}

#sidebar-menu .dropdown-menu[x-placement^="right"] {
  right: auto;
  bottom: auto;
}

#sidebar-menu .dropdown-menu.show {
  display: block;
}

/**************************************************
 * SIDEBAR
 **************************************************/

/* These are common values for the sidebar, so we don't hardcode them multiple times
   in the CSS */
:root {
  /* Width of the sidebar when expanded */
  --sidebar-expanded-width: 200px;
  /* Width of the sidebar when collapsed */
  --sidebar-collapsed-width: 50px;
  /* Current width of the sidebar, it will be either expanded or collapsed width */
  --sidebar-width: var(--sidebar-expanded-width);
  /* Height of the sidebar items */
  --sidebar-li-height: 36px;
  /* Padding of the sidebar items when expanded */
  --sidebar-expanded-li-padding-w: 15px;
  /* Padding of the sidebar items when collapsed */
  --sidebar-collapsed-li-padding-w: 5px;
  /* Current padding of the sidebar items, it will be either expanded or collapsed padding */
  --sidebar-li-padding-w: var(--sidebar-expanded-li-padding-w);
  /* Padding of the sidebar items when collapsed */
  --sidebar-li-padding-h: 5px;
  /* Size of the feather icons */
  --sidebar-icon-size: 14px;
  /* Space between the icon and the text */
  --sidebar-icon-gap: 10px;
  /* Background color of the sidebar */
  --sidebar-background-color: rgb(45, 45, 46);
}

/* When the sidebar is collapsed, we use the collapsed values */
html.collapsed {
  --sidebar-li-padding-w: var(--sidebar-collapsed-li-padding-w);
  --sidebar-width: var(--sidebar-collapsed-width);
}

/* The main sidebar container, it's fixed so it's always in the viewport */
#sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 20;
  overflow-y: auto;
}

/* Adds transition to all elements inside the sidebar. We only include the
   transitions we want  */
#sidebar-menu,
#sidebar-menu * {
  transition-property: opacity, width, height, left, padding, transform, visibility;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  /* From Bootstrap: prevents problems with paddings */
  box-sizing: border-box;
}

/* The light background color when hovering over a sidebar item */
#sidebar-menu a:hover > span {
  background-color: #394861;
}

/* This wrapper only exists to allow the scrollbar to have its own space */
#sidebar-content {
  min-height: 100%;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--sidebar-background-color);
}

/* This wrapper allows the dropdowns to fade in when hovering over any
   section button. That way if the user moves the mouse between section
   buttons if a dropdown is already opened the next one won't fade in,
   this looks better */
#sidebar-sections {
  display: flex;
  flex-direction: column;
}

/* The section container's width adapts to the sidebar width, otherwise we
   cannot see the border radius on the right side, it'd get cut off */
lens-sidebar-section {
  width: var(--sidebar-width);
}

/* This is the button that toggles the section */
lens-sidebar-section button {
  border: none;
  outline: none !important;
  background: none;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--sidebar-li-height) + 10px);
  color: rgb(204, 204, 204);
  padding: 0 12px;
  cursor: pointer;
}

/* Undo .dropdown-toggle's style */
lens-sidebar-section button::after {
  border: none !important;
  outline: none !important;
}

/* Makes the section toggle text white on hover */
lens-sidebar-section button:hover {
  color: white;
}

lens-sidebar-section.active button {
  color: white;
}

/* The feather icon */
lens-sidebar-section button .feather {
  position: absolute; /* So it doesn't move when the section is toggled */
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  left: calc(3px + var(--sidebar-expanded-li-padding-w));
  bottom: initial; /* In lens.css it has "bottom: 1px", but we reset it to fix alignment issues */
}

/* The chevron icon uses "right" as padding so it's not too close to the edge
   of the sidebar */
lens-sidebar-section button .feather-chevron-down {
  left: initial;
  right: 15px;
}

/* The text of the section */
lens-sidebar-section button .sidebar-menu-text {
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans';
  letter-spacing: .5px;
  letter-spacing: 1px;
  font-size: 12px!important;
  position: absolute; /* So it doesn't move when the section is toggled */
  /* The text is going to be to the right of the icon and the padding, with a
     little gap so it's not too close to the icon */
  left: calc(18px + var(--sidebar-expanded-li-padding-w) + var(--sidebar-icon-gap));
  /* The remaining width available for the text. It's not exact, it goes a bit over
     what it should and goes over the right chevron, but it's doesn't affect anything so it's fine */
  width: calc(var(--sidebar-width) - (var(--sidebar-icon-size) + var(--sidebar-expanded-li-padding-w) * 2 + var(--sidebar-icon-gap)));
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[lang="ja"] lens-sidebar-section button .sidebar-menu-text {
  font-family: 'IBM Plex Sans';
  font-size: 14px!important;
}

lens-sidebar-section button .sidebar-section-button-border {
  position: absolute;
  top: 8px;
  left: 0;
  width: 3px;
  height: calc(100% - 16px);
  background-color: #2563eb;
  border-radius: 5px;
  opacity: 0;
  transition: none !important; /* So it appears instantly on page load */
}

/* Show a blue border in the section icon when active and the sidebar is collapsed */
lens-sidebar-section.active button .sidebar-section-button-border {
  opacity: 1;
}

lens-sidebar-section .sidebar-ul {
  width: var(--sidebar-expanded-width);
  overflow: hidden;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

lens-sidebar-section-li {
  width: var(--sidebar-width);
  height: var(--sidebar-li-height);
}

lens-sidebar-section-li a {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--sidebar-width);
  height: var(--sidebar-li-height);
  color: rgb(204, 204, 204);
  text-decoration: none;
}

lens-sidebar-section-li[disabled="true"] a {
  color: rgba(204, 204, 204, 0.5);
  pointer-events: none;
}

lens-sidebar-section-li a:hover {
  color: white;
}

lens-sidebar-section-li.active a {
  color: white;
}

lens-sidebar-section-li a > span {
  position: absolute;
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  width: calc(var(--sidebar-expanded-width) - (2 * var(--sidebar-expanded-li-padding-w)));
  height: calc(var(--sidebar-li-height) - (1 * var(--sidebar-li-padding-h)));
  padding-left: calc(18px + var(--sidebar-icon-gap));
  border-radius: 5px;
  left: var(--sidebar-expanded-li-padding-w);
}

lens-sidebar-section-li.active a > span {
  background-color: #2563eb !important;
}


lens-sidebar-section.collapsed .feather:last-child {
  transform: rotate(-90deg);
}

#sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
  padding-top: 10px;
  padding-bottom: 8px;
  padding-left: 0;
  margin-bottom: 0;
}

lens-sidebar-bottom-li {
  display: block;
  width: var(--sidebar-width);
  height: var(--sidebar-li-height);
}

lens-sidebar-bottom-li a {
  display: block;
  width: var(--sidebar-width);
  height: 100%;
  color: rgb(204, 204, 204);
  text-decoration: none;
  padding: calc(var(--sidebar-li-padding-h) / 2) var(--sidebar-li-padding-w);
}

lens-sidebar-bottom-li[disabled="true"] a {
  color: rgba(204, 204, 204, 0.5);
  pointer-events: none;
}

lens-sidebar-bottom-li a:hover {
  color: white;
}

lens-sidebar-bottom-li.active a {
  color: white;
}

lens-sidebar-bottom-li a > span {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 5px;
}

lens-sidebar-bottom-li.active a > span {
  background-color: #2563eb !important;
}

lens-sidebar-bottom-li .feather {
  position: absolute;
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  left: 8px;
  bottom: initial;
}

lens-sidebar-bottom-li .sidebar-menu-text {
  position: absolute;
  /* The text is going to be to the right of the icon and the padding, with a
     little extra so it's not too close to the icon */
  left: calc(var(--sidebar-icon-size) + var(--sidebar-expanded-li-padding-w) + 3px);
  width: 140px;
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#navbar-brand-link {
  position: relative;
  display: block;
  width: var(--sidebar-expanded-width);
  height: 24px;
  flex-shrink: 0;
  margin-top: 8px;
  margin-bottom: 2rem;
  /* We don't want the hover transition to take time */
  transition: none;
}

#navbar-brand-link:hover {
  opacity: 0.6;
}

#navbar-icon {
  position: absolute;
  left: 23px;
  top: 10px;
  width: calc(100% - 50px);
  height: 100%;
  object-fit: contain;
  object-position: left;
  /* background-color: var(--sidebar-background-color); */
  z-index: 1;
}

#navbar-icon-collapse {
  position: absolute;
  left: 15px;
  top: 12px;
  height: 83%;
}

/**************************************************
 * COLLAPSED SECTION
 **************************************************/

lens-sidebar-section.collapsed .sidebar-ul {
  height: 0 !important;
}

/**************************************************
 * DROPDOWN
 **************************************************/

lens-sidebar-section .dropdown-menu {
  background-color: var(--sidebar-background-color) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  padding: 5px 3px !important;
  margin-left: 0 !important; /* We need to remove this gap, or placing the cursor here
                     causes the dropdown to close */
  min-width: 0; /* Override Bootstrap's default value */
  width: 140px; /* Give it a fixed width (it should fit all the texts) */
}

lens-sidebar-section .dropdown-title {
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'IBM Plex Sans Condensed';
  letter-spacing: .5px;
  letter-spacing: 1px;
  font-size: 12px!important;
  display: block;
  width: 100%;
  color: white;
  padding-top: 8px;
  padding-bottom: 12px;
  padding-left: 15px;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

lens-sidebar-section .dropdown-ul {
  overflow: hidden;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

lens-sidebar-section .dropdown-menu lens-sidebar-section-li {
  padding: 0;
}

/* Overrides the sidebar styles for the dropdown items */
lens-sidebar-section .dropdown-menu lens-sidebar-section-li a {
  width: 100%; /* No need to have a fixed width */
  height: auto; /* No need to have a fixed height */
  text-decoration: none; /* This gets set again for some reason, so we remove it */
  padding: 3px 4px; /* Using paddings instead of absolute positioning */
}

/* Overrides the sidebar styles for the dropdown items */
lens-sidebar-section .dropdown-menu lens-sidebar-section-li a > span {
  position: static; /* No need to align with anything */
  left: calc(0.5rem + var(--sidebar-li-padding-h)); /* Bootstrap's dropdown padding + our padding */
  width: 100%; /* No need to have a fixed width */
  padding: 0 10px; /* Padding is only for aligning with the section icon in the sidebar, so we can give it a smaller value */
}

lens-sidebar-section .dropdown-menu {
  position: fixed !important;
  display: block !important;
  opacity: 0 !important;
  transition: opacity 0.15s linear !important;
}

#sidebar-sections:hover lens-sidebar-section .dropdown-menu,
lens-sidebar-section .dropdown-menu:hover {
  opacity: 1 !important;
}

#sidebar-sections:hover lens-sidebar-section .dropdown-menu {
  border-color: transparent;
}

/**************************************************
 * COLLAPSED SIDEBAR
 **************************************************/

html.collapsed #sidebar-content {
  width: var(--sidebar-width);
}

html.collapsed #sidebar-bottom a {
  width: calc(var(--sidebar-width) - (2 * var(--sidebar-li-padding)));
}

html.collapsed #sidebar-bottom .sidebar-menu-text {
  opacity: 0;
}

html.collapsed lens-sidebar-section button {
  width: var(--sidebar-width);
}

html.collapsed lens-sidebar-section button .sidebar-menu-text {
  opacity: 0;
}

html.collapsed lens-sidebar-section button .feather:last-child {
  opacity: 0;
}

html.collapsed lens-sidebar-section .sidebar-ul {
  height: 0 !important;
}

html.collapsed lens-sidebar-section .sidebar-ul {
  opacity: 0;
}

html.collapsed #navbar-icon {
  opacity: 0;
}

html:not(.collapsed) #navbar-icon-collapse {
  opacity: 0;
}

/* It's tricky handling both the tooltip and dropdown at the same time, so
   we just hide it when the sidebar is expanded */
html:not(.collapsed) lens-sidebar-section .dropdown-menu {
  display: none !important;
}

html.collapsed lens-sidebar-bottom-li a {
  padding: calc(var(--sidebar-li-padding-h) / 2) 10px; /* Hardcoded value, need to adjust properly */
}

html.collapsed lens-sidebar-bottom-li .feather {
  left: 8px; /* Hardcoded value, need to adjust properly */
}