@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

:host {
  display: block;
}

.sky-split-view {
  // Set position:relative to give resize handle's absolute positioning a new origin.
  position: relative;
  display: flex;
  border: 1px solid $sky-border-color-neutral-medium;
  background: transparent;
  margin: var(--sky-layout-host-content-spacing, 0);
  max-height: 100%;

  .sky-split-view-workspace-flex-container {
    flex-grow: 1;
    flex-shrink: 99;
    overflow: auto;
  }
}

.sky-split-view-dock-fill {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

// Drawer should be full-width when in mobile view.
@include mixins.sky-host-responsive-container-xs-min() {
  .sky-split-view-drawer-flex-container {
    width: 100%;
  }
}
@include mixins.sky-host-responsive-container-sm-min() {
  .sky-split-view-drawer-flex-container {
    width: auto;
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  @include mixins.sky-theme-modern {
    .sky-split-view {
      border-left: none;
    }
  }
}
