$panel-resizer-grip-width: $panel-resizer-width - 4px;

.psv-panel {
  position: absolute;
  z-index: $panel-zindex;
  right: 0;
  height: 100%;
  width: $panel-width;
  max-width: calc(100% - #{$panel-resizer-width});
  background: $panel-background;
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  transition-duration: .1s;
  cursor: default;
  margin-left: $panel-resizer-width;

  .psv-container.has-navbar & {
    height: calc(100% - #{$buttons-height + 2 * $buttons-padding});
  }

  .close-button {
    display: none;
    position: absolute;
    top: 0;
    left: -$panel-close-button-width;
    width: $panel-close-button-width;
    height: $panel-close-button-width;
    background: $panel-close-button-background;

    &::before, &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 4px;
      width: $panel-close-button-width - 9px;
      height: 1px;
      background-color: $panel-close-button-color;
      transition: .2s ease-in-out;
      transition-property: width, left, transform;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    &:hover {
      &::before, &::after {
        left: 0;
        width: $panel-close-button-width - 1px;
      }

      &::before {
        transform: rotate(135deg);
      }

      &::after {
        transform: rotate(45deg);
      }
    }
  }

  .resizer {
    display: none;
    position: absolute;
    top: 0;
    left: -$panel-resizer-width;
    width: $panel-resizer-width;
    height: 100%;
    background-color: $panel-resizer-background;
    cursor: col-resize;

    @if $panel-resizer-grip-width > 0 {
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: ($panel-resizer-width - $panel-resizer-grip-width) / 2 - 1px;
        margin-top: (-$panel-resizer-grip-height / 2);
        width: 1px;
        height: 1px;
        box-shadow: make-dot-shadow($panel-resizer-grip-color, $panel-resizer-grip-width, $panel-resizer-grip-height);
        background: transparent;
      }
    }
  }

  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: $panel-text-color;
    font: $panel-font;
    overflow: auto;

    &:not(.no-margin) {
      padding: $panel-padding;
    }

    &.no-interaction {
      @include user-select(none);
      pointer-events: none;
    }
  }

  &.open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition-duration: .2s;

    .close-button, .resizer {
      display: block;
    }
  }
}