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

:host {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
  background: v(sidepanel-background-color);

  [dir='rtl'] & {
    right: auto;
    left: 0;
  }

  &.is-floating {
    z-index: 1;
    box-shadow: v(sidepanel-floating-shadow);
  }

  .is-closed {
    transform: translateX(100%);

    [dir='rtl'] & {
      transform: translateX(-100%);
    }
  }

  &.light {
    background: v(sidepanel-light-background-color);
    border-left: 1px solid v(sidepanel-light-border-color);

    [dir='rtl'] & {
      border-left: unset;
      border-right: 1px solid v(sidepanel-light-border-color);
    }
  }

  @media screen and (forced-colors: active) {
    border-left: 1px solid CanvasText;

    [dir='rtl'] & {
      border-left: none;
      border-right: 1px solid CanvasText;
    }
  }
}

// Deprecated: styles for a nx-sidepanel without a wrapping nx-sidepanel-outer-container.
// if no wrapper is used, the sidepanel currently is not animated when opening closing,
// since a controlled environment is needed so that the animation works as expected.
:host.without-wrapper {
  &.is-floating {
    position: fixed;
    right: 0;
    z-index: 1;
    box-shadow: v(sidepanel-floating-shadow);

    [dir='rtl'] & {
      right: auto;
      left: 0;
    }
  }

  &.is-static {
    position: sticky;
    top: 0;
  }

  &.is-closed {
    display: none;
  }
}
