@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);
}

.sidebar__cross-signin-alert .avatar-container {
  box-shadow: var(--bs-danger-border);
  animation-name: pushRight;
  animation-duration: 400ms;
  animation-iteration-count: 30;
  animation-direction: alternate;
}

@keyframes pushRight {
  from {
    transform: translateX(4px) scale(1);
  }
  to {
    transform: translateX(0) scale(1);
  }
}