.Frame {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 280px;
    overflow: hidden;

    &.is-resizing {
        cursor: grabbing;

        .Frame-body,
        .Frame-panel {
            user-select: none;
            pointer-events: none;
        }
    }
}

.Frame--full {
    > .Error {
        margin: 20px;
    }
}

.Frame-header {
    flex-shrink: 0;
}

.Frame-logo {
    display: block;
    margin-bottom: 40px;
    margin-top: 25px;
    text-align: center;
    width: 100%;
    
    &--image {
        height: 73px;
        margin: auto;
        width: 192px;
    }
}

.Frame-body {
    display: flex;
    flex-direction: row-reverse;
    flex-grow: 1;
    height: calc(100% - 3rem);

    @include mq($until: navCollapse) {
        @include margin-inline(end, $width-sidebar);
        transform: translate3d(($width-sidebar * -1), 0, 0);
        transition: none;
    }
}

.Frame-inner {
    @include trbl(0);
    position: absolute;
    height: 100%;
    min-width: 280px;
    overflow: auto;
}

.Frame-panel {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.Frame-panel--sidebar {
    @include border-inline(end, 1px solid $color-frame-border);
    flex: 0 0 auto;
    width: $width-sidebar;
    min-width: $width-sidebar;
    max-width: ($width-sidebar * 2);
    background-color: $color-background-offset;
    padding: 1rem 0;

    @include mq($until: navCollapse) {
        max-width: $width-sidebar;
    }
}

.Frame-panel--main {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    overflow: auto;

    &.is-loading {
        background-image: url("../img/loader.svg");
        background-repeat: no-repeat;
        background-position: 50%;

        .Frame-inner {
            display: none;
        }
    }
}

.Frame-handle {
    @include dragHandle;
    @include margin-inline(end, -$handle-size);
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    height: 100%;
    width: $handle-size;
    background: transparent url("../img/icon-drag--vertical.svg") no-repeat 50% 45%;
    background-size: 3px 16px;
    cursor: ew-resize;
}