@use '../common/mixins';
@use '../common/variables';
@use '../utilities/text';

$sidebar-width: 200px;

.sidebar {
  transition: inset-inline-start variables.$transition-md;
  @include mixins.calc(height, '100vh - 'variables.$navbar-height);
  position: sticky;
  flex-shrink: 0;
  border-inline-end: variables.$border;
  width: $sidebar-width;
  inset-block-start: variables.$navbar-height;
  padding: 1rem;
  overflow-y: scroll;
  scrollbar-color: light;  
  z-index: 11;
  background-color: variables.$background-default;
  
  &.js-opened {
    inset-inline-start: 0;
  }
  
  @include mixins.responsive(down, tablet) {
    position: fixed;
    height: 100vh;
    inset-block-start: 0;
    inset-inline-start: -$sidebar-width;
    padding-block-start: variables.$navbar-height-sm;
    z-index: 13;
  }

  &_button {
    content: '';
    border: solid variables.$text;
    border-width: 0 2px 2px 0;
    padding: 4px;
    transform: rotate(-45deg);
    margin-inline-end: 1rem;
    display: none;

    .page-withSidebar & { display: initial; }
    @include mixins.responsive(up, tablet) { display: none !important; }

    &-close {
      position: absolute;
      inset-block-start: variables.$navbar-height-sm*0.5;
      inset-inline-start: variables.$navbar-height-sm*0.5;
      transform: translateY(-50%) rotate(135deg);
    }
  }

  &_title {
    @extend %overline;
    color: variables.$text-alt;
    font-weight: variables.$weight-bold;
    margin-block-end: .25rem;
    margin-inline-start: 0;
  }
}