.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;
    }
}