.Preview {
  position: relative;

  &.is-disabled {
    .Preview-overlay {
      display: block;
    }
  }

  &.is-resizing {
    cursor: grabbing;

    * {
      cursor: grabbing !important;
    }
  }

  @include mq(navCollapse) {
    background-color: $color-background-offset;
    border: 1px solid $color-frame-border;
  }
}

.Preview-wrapper {
  @include offset-inline(start, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  width: calc(100% + #{$handle-size});
  min-width: 200px;
  max-width: calc(100% + #{$handle-size});
  background-color: transparent;
}

.Preview-resizer {
  @include offset-inline(start, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  max-width: calc(100% - #{$handle-size} + 1px);
  min-width: 180px;
  background-color: white;
  -webkit-overflow-scrolling: touch;

  @include mq($until: navCollapse) {
    width: 100% !important; // override any JS-set widths
    min-width: 100%;
    border: 0;
  }

  .Error {
    margin: 0.75rem;
  }
}

.Preview-iframe {
  @include trbl(0);
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.Preview-overlay {
  @include trbl(0);
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
}

.Preview-handle {
  @include border-inline(start, 1px solid $color-frame-border);
  @include dragHandle;
  @include offset-inline(end, 0);
  position: absolute;
  top: -1px;
  bottom: -1px;
  z-index: 100;
  height: calc(100% + 2px);
  width: $handle-size;
  background: transparent url('../img/icon-drag--vertical.svg') no-repeat 50%;
  background-size: 3px 16px;
  cursor: ew-resize;

  @include mq($until: navCollapse) {
    display: none;
  }
}