:root {
  --ui-sidebar-min-width: 132px;
  --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);
  min-width: var(--ui-sidebar-min-width);
  max-width: var(--ui-sidebar-max-width);
  display: flex;
  flex-direction: column;

  .--section {
    margin-bottom: 1rem;
  }

  &.--desktop-only {
    @media (max-width: 1023px) {
      display: none;
    }
  }

  &.--mobile-only {
    display: none;
    bottom: unset;
    width: 100%;
    max-width: unset;

    @media (max-width: 1023px) {
      display: block;
    }

    & .--container {
      flex-direction: row;
      border-right: unset;
      border-top: 1px solid var(--ui-sidebar-border-color);
      height: auto;
      transition: height 0.2s ease, opacity 0.15s ease;
      overflow: hidden;

      &.--content {
        padding: var(--ui-sidebar-padding);
        height: 100%;
        flex-direction: column;
        border-bottom: 1px solid var(--ui-sidebar-border-color);
      }
      
      &.--collapsed {
        height: 0;
        opacity: 0;
        pointer-events: none;
      }
      
      &.--expanded {
        display: block;
        opacity: 1;
      }
    }
  }
  
  & .--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);
    }
  }
}

.ui-container {
  @media (max-width: 1023px) {
    &.--mobile-sidebar-offset {
      margin-top: 72px;
      max-width: unset;
    }
  }
}