/**
 * Applies the scrollbar theme to a selector.
 */
ac-layout {
  display: flex;
  background: var(--color-neutral-lighter, #F5F5F5);
}
ac-layout .ac-layout__nav-left-container {
  height: 100vh;
  border: 0;
}
ac-layout .ac-layout__nav-left-container ac-navdrawer {
  border-radius: 0 8px 8px 0;
}
ac-layout .ac-layout__content-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: auto;
  transition: filter ease-in-out 0.1s;
  background: var(--color-neutral-lighter, #F5F5F5);
}
ac-layout .ac-layout__content-scroll {
  position: relative;
}
@media (max-width: 768px) {
  ac-layout .ac-layout__content-scroll {
    height: 100%;
    max-height: 100%;
    overflow: auto;
  }
  ac-layout .ac-layout__nav-left-container {
    position: absolute;
    z-index: 4;
    transform: translateX(-100%);
    transition: transform ease-in-out 0.1s;
  }
}

@media (max-width: 768px) {
  ac-layout.ac-layout--nav-left-collapsed .ac-layout__nav-left-container {
    position: absolute;
    transform: translateX(0);
  }
  ac-layout.ac-layout--nav-left-collapsed .ac-layout__content-container {
    filter: brightness(0.4);
  }
  ac-layout.ac-layout--nav-left-collapsed ac-navdrawer {
    box-shadow: 16px 0px 32px rgba(0, 0, 0, 0.08);
  }
}

ac-layout .ac-layout__content-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

ac-layout .ac-layout__content-container::-webkit-scrollbar-track {
  background: rgba(var(--color-theme-contrast-rgb, 17, 17, 17), 0.2);
}

ac-layout .ac-layout__content-container::-webkit-scrollbar-thumb {
  background: rgba(var(--color-theme-contrast-rgb, 17, 17, 17), 0.3);
}

ac-layout .ac-layout__content-container::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-theme-contrast-rgb, 17, 17, 17), 0.4);
}

ac-layout .ac-layout__content-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

ac-layout .ac-layout__content-scroll::-webkit-scrollbar-track {
  background: rgba(var(--color-theme-contrast-rgb, 17, 17, 17), 0.2);
}

ac-layout .ac-layout__content-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--color-theme-contrast-rgb, 17, 17, 17), 0.3);
}

ac-layout .ac-layout__content-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-theme-contrast-rgb, 17, 17, 17), 0.4);
}