.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;
  overflow-x: scroll;
}

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