@import '../shared-styles/index';

$sidebar-width: 280px;

:host {
  position: relative;
  height: 100%;
  transition: width 0.15s ease;
  display: flex;
  flex: 0 0 auto;
  width: $sidebar-width;

  &.is-resizing {
    transition: none;
  }

  @include media-breakpoint-down(small) {
    width: 100%;
    transition: none;

    .nx-sidebar__handle {
      display: none;
    }
  }

  &.is-closed {
    ::ng-deep .nx-sidebar__toggle-button {
      transform: rotateZ(180deg);
    }

    ::ng-deep .nx-sidebar__footer-container {
      flex-direction: column;
      align-items: center;
    }

    ::ng-deep .nx-action__wrapper {
      text-wrap: nowrap;
      flex-shrink: 1;
    }
  }

  &.hide-label {
    ::ng-deep .nx-action__wrapper {
      justify-content: center;

      &::before {
        display: none;
      }

      .nx-action-icon__container {
        padding-right: 0;
      }

      .nx-action__label {
        display: none;
      }
    }

    ::ng-deep .nx-action {
      padding: nx-spacer(2xs) 0;
    }
  }
}

::ng-deep .nx-sidebar__footer {
  padding-bottom: 8px;
  display: flex;
  justify-content: flex-end;
  color: v(sidebar-footer-button-color);

  &::before,
  &::after {
    content: '';
    display: block;
    flex: 0 1 22px;
    min-width: nx-spacer(2xs);
    height: 1px;
  }

  &::after {
    flex: 0 1 nx-spacer(s);
  }
}

::ng-deep .nx-sidebar__footer-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
}

.nx-sidebar__handle {
  position: absolute;
  right: -14px;
  top: 0;
  bottom: 0;
  display: flex;
  flex: 0 0 nx-spacer(s);
  justify-content: center;
  align-items: center;
  appearance: none;
  border: none;
  box-shadow: none;
  background: none;
  margin: 0;
  cursor: col-resize;
  outline: none;
  z-index: 1;
  color: v(sidebar-handle-color);

  :host-context([dir='rtl']) & {
    right: auto;
    left: -15px;
  }

  &::before {
    content: '||';
    font-size: nx-font-size(4xs);
    letter-spacing: -0.0625rem;
    font-weight: $font-weight-semibold;
    color: inherit;

    @media screen and (forced-colors: active) {
      forced-colors-adjust: none;
      color: buttonText;
      background-color: buttonFace;
      box-shadow:
        0 0 0 6px buttonFace,
        0 0 0 nx-spacer(2xs) buttonText;
    }
  }

  // don't show inner dotted border on firefox
  &::-moz-focus-inner {
    border: 0;
  }
}

.nx-sidebar__handle.cdk-keyboard-focused {
  &::before {
    border-radius: nx-border-radius(s);
    padding-right: 1px;
    @include focus-style;

    [dir='rtl'] & {
      padding-right: initial;
      padding-left: 1px;
    }
  }
}

.nx-sidebar__box {
  height: 100%;
  flex: 1 1 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background: v(sidebar-background-color);

  @media screen and (forced-colors: active) {
    border-right: nx-border-size(xs) solid CanvasText;

    :host-context([dir='rtl']) & {
      border-right: none;
      border-left: nx-border-size(xs) solid CanvasText;
    }
  }
}

.nx-sidebar__content {
  flex: 1 1 100%;
  overflow: hidden;
  overflow-y: auto;
  padding-top: nx-spacer(s);

  &:only-child {
    padding-bottom: nx-spacer(s);
  }
}
