cinny/src/app/organisms/navigation/SideBar.scss

@use '../../partials/flex';
@use '../../partials/dir';

.sidebar {
  @extend .cp-fx__column;

  width: var(--navigation-sidebar-width);
  height: 100%;
  background-color: var(--bg-surface-extra-low);
  @include dir.side(border,
    none,
    1px solid var(--bg-surface-border),
  );

  &__scrollable,
  &__sticky {
    width: 100%;
  }

  &__scrollable {
    @extend .cp-fx__item-one;
  }
}

.scrollable-content {
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 8px;

    background: transparent;
    background-image: linear-gradient(
      to top,
      var(--bg-surface-extra-low),
      var(--bg-surface-extra-low-transparent));
    position: sticky;
    bottom: -1px;
    left: 0;
  }
}

.featured-container,
.space-container,
.sticky-container {
  @extend .cp-fx__column--c-c;
  
  padding: var(--sp-ultra-tight) 0;

  & > .sidebar-avatar,
  & > .avatar-container {
    margin: calc(var(--sp-tight) / 2) 0;
  }
}
.sidebar-divider {
  margin: auto;
  width: 24px;
  height: 1px;
  background-color: var(--bg-surface-border);
}