$finder-panel-left-bg: rgba($neutral-light, 0.5) !default;
$finder-panel-left-width: 350px !default;
$finder-panel-left-height: 100% !default;
$finder-panel-right-bg: $neutral-base-lightest !default;

.gui-finder-panel-layout {
  display: flex;
  flex: 2;

  &__left {
    background: $finder-panel-left-bg;
    width: $finder-panel-left-width;
    flex-shrink: 0;
    position: fixed;
    overflow: auto;
    height: $finder-panel-left-height;
  }

  &__right {
    width: 100%;
    min-width: 0;
    margin-left: $finder-panel-left-width;
    background: $finder-panel-right-bg;
  }
}

.gui-finder-panel-layout__left-head {
  padding: $layout-spacing-base $layout-spacing-base 0;
}

.gui-finder-panel-layout__left-content {
  padding: $layout-spacing-base;
}

.gui-finder-panel-layout__left-head--fixed {
  background: $finder-panel-right-bg;
  position: fixed;
  width: calc(100% - #{$finder-panel-left-width});
  z-index: 50;
}