.sidebar {
  background-color: var(--color-background);
  z-index: 40;
  box-shadow: var(--shadow-3);
  border-radius: 0 0 var(--radius-4) var(--radius-4);

  @media screen and (min-width: 1024px) {
    z-index: unset;
    box-shadow: none;
    border-radius: 0;
    border-right: 1px solid var(--gray-5);
  }
}

.sidebar__aside {
  max-height: calc(90svh - var(--header));

  @media screen and (min-width: 1024px) {
    max-height: unset;
  }

  > .sidebar__item-section:not(:first-child) {
    margin-top: var(--space-4);
  }
}

.sidebar__item {
  line-height: var(--line-height-1);
  border-radius: max(var(--radius-4), var(--radius-full));
  color: var(--gray-10);
  width: calc(100% + var(--space-3));
  scroll-margin-block: var(--space-3);

  &:hover {
    color: var(--gray-12);
    text-decoration: none;
  }

  &:focus,
  &:focus-visible {
    outline-offset: -2px;
  }

  &[data-active='true'] {
    background-color: var(--gray-3);
    color: var(--gray-12);
  }
}

.sidebar__title {
  color: var(--gray-5);
  font-weight: 500;
  border-width: 1px;
  border-color: var(--gray-5);
  position: relative;
}

.sidebar__item--indicator {
  top: 0;
  width: 1px;
  height: 100%;
  left: calc(var(--space-5) * -1);
  position: absolute;
  border-radius: var(--rounded-6);
  background-color: var(--accent-indicator);

  &[data-active='false'] {
    visibility: hidden;
    opacity: 0;
  }
}

.sidebar-item__collapse {
  position: absolute;
  right: var(--space-1);
  top: var(--space-1);
  border-radius: var(--radius-3);
}

.sidebar__descendants-line {
  left: 0;
  top: var(--space-1);
  bottom: var(--space-1);
  width: 1px;
  border-radius: var(--rounded-6);
  background-color: var(--gray-5);
}

.sidebar__divider {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--gray-5);
}

.sidebar__mobile-toggle {
  background-color: var(--color-background);
  z-index: 40;
  height: var(--header-mobile-sidebar-trigger);
  border-bottom: 1px solid var(--gray-5);
  top: calc(var(--header-only) - 1px);
}
