:root {
  --ui-sidebar-width: 15vw;
  --ui-sidebar-max-width: 200px;
  --ui-sidebar-background: #ffffff;
  --ui-sidebar-border-color: var(--ui-shared-element-border-color);
  --ui-sidebar-padding: 10px;
  --ui-sidebar-item-padding: var(--ui-shared-element-padding);
  --ui-sidebar-gap: 1.25rem;
  --ui-sidebar-active-bg: var(--ui-color-gray-100);
  --ui-sidebar-hover-bg: var(--ui-color-gray-100);
  --ui-sidebar-active-color: --ui-shared-color-base-foreground;
  --ui-sidebar-hover-color: --ui-shared-color-base-foreground;
  --ui-sidebar-eyebrow-color: var(--ui-eyebrow-text-color);
  --ui-sidebar-eyebrow-margin: 0.2rem 0;
}

.ui-sidebar-body {
  margin-left: var(--ui-sidebar-width);
}

@media (max-width: 1023px) {
  
}
.ui-sidebar {
  
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--ui-z-index-level-1);
  width: var(--ui-sidebar-width);
  max-width: var(--ui-sidebar-max-width);
  display: flex;
  flex-direction: column;

  .--section {
    margin-bottom: 1rem;
  }
  
  & .--container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid var(--ui-sidebar-border-color);
    background-color: var(--ui-sidebar-background);
  }
  
  & .--top {
    padding: var(--ui-sidebar-padding);
    border-bottom: 1px solid var(--ui-sidebar-border-color);
  }
  
  & .--middle {
    flex: 1;
    overflow-y: auto;
    padding: var(--ui-sidebar-padding);
  }
  
  & .--bottom {
    padding: var(--ui-sidebar-padding);
    border-top: 1px solid var(--ui-sidebar-border-color);
  }
  
  & .--eyebrow {
    font-size: 0.75rem;
    line-height: 1.5rem;
    font-weight: var(--ui-font-weight-bold);
    color: var(--ui-sidebar-eyebrow-color);
    margin: var(--ui-sidebar-eyebrow-margin);
  }

  
  & .--menu-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: var(--ui-sidebar-item-padding);
    border-radius: var(--ui-shared-element-border-radius);
    text-decoration: none;
    font-size: var(--ui-shared-font-size-sm);
    line-height: 1.5rem;
    font-weight: var(--ui-font-weight-bold);
    color: var(--ui-shared-text-color-primary);
    transition: background-color 0.2s, color 0.2s;
    height: var(--ui-shared-element-height);
    margin-bottom: 3px;
    
    &.--active {
      background-color: var(--ui-sidebar-active-bg);
      color: var(--ui-sidebar-active-color);
      font-weight: var(--ui-shared-font-weight-bold);
    }
    
    &:hover:not(.--active) {
      background-color: var(--ui-sidebar-hover-bg);
      color: var(--ui-sidebar-hover-color);
    }
  }
  
  & .--icon {
    display: flex;
    width: var(--ui-shared-icon-dimension-sm);
    height: var(--ui-shared-icon-dimension-sm);
    flex-shrink: 0;
    
    .--menu-item:hover & {
      color: var(--ui-sidebar-icon-hover-color);
    }
    
    .--menu-item.--active & {
      color: var(--ui-sidebar-icon-active-color);
    }
  }
}