@import './variables';

.s-navigation-drawer__border {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: $navigation-drawer-border-width;
  background-color: var(--theme-dividers);
}

.s-navigation-drawer__content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.s-navigation-drawer {
  background-color: var(--theme-navigation-drawer);
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  left: 0;
  max-width: 100%;
  width: var(--s-nav-width);
  height: 100%;
  overflow: hidden;
  pointer-events: auto;
  top: 0;
  transition-duration: 0.2s;
  transition-timing-function: map-get($transitions, 'fast-out-slow-in');
  will-change: transform;
  transition-property: transform, visibility, width;

  &:not(.active) {
    transform: translateX(-100%);
  }

  &.fixed {
    position: fixed;
  }

  &.absolute {
    position: absolute;
  }

  &.right {
    left: auto;
    right: 0;

    &::after {
      left: 0;
      right: initial;
    }

    &:not(.active) {
      transform: translate(100%);
    }

    .s-navigation-drawer__border {
      right: auto;
      left: 0;
    }
  }

  &.clipped {
    top: var(--s-nav-clipped-height);
    max-height: calc(100% - var(--s-nav-clipped-height));
  }

  &.mini {
    width: var(--s-nav-min-width);
    overflow: hidden;

    .s-list-item {
      > *:first-child {
        margin-left: 0;
        margin-right: 0;
      }

      > *:not(:first-child) {
        display: none;
      }
    }
  }
}