:host {
  /**
   * @prop --border: Border between panes
   * @prop --side-min-width: Minimum width of the side pane. Does not apply when split pane is collapsed.
   * @prop --side-max-width: Maximum width of the side pane. Does not apply when split pane is collapsed.
   * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
   */
  --side-width: 100%;
  --border: 0.55px solid var(--bkkr-border, rgba(var(--bkkr-text-color-rgb, 0, 0, 0), 0.1));
  --side-min-width: 270px;
  --side-max-width: 320px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-flow: row nowrap;
  contain: strict;
}

/**
 * Do not pass CSS Variables down on larger
 * screens as we want them to affect the outer
 * `bkkr-menu` rather than the inner content
 */
::slotted(bkkr-menu.menu-pane-visible) {
  flex: 0 1 auto;
  width: var(--side-width);
  min-width: var(--side-min-width);
  max-width: var(--side-max-width);
}

:host(.split-pane-visible) ::slotted(.split-pane-side),
:host(.split-pane-visible) ::slotted(.split-pane-main) {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* stylelint-disable-next-line declaration-no-important */
  position: relative !important;
  /* stylelint-disable-next-line declaration-no-important */
  box-shadow: none !important;
  z-index: 0;
}

:host(.split-pane-visible) ::slotted(.split-pane-main) {
  flex: 1;
}

:host(.split-pane-visible) ::slotted(.split-pane-side:not(bkkr-menu)),
:host(.split-pane-visible) ::slotted(bkkr-menu.split-pane-side.menu-enabled) {
  display: flex;
  flex-shrink: 0;
}

::slotted(.split-pane-side:not(bkkr-menu)) {
  display: none;
}

:host(.split-pane-visible) ::slotted(.split-pane-side) {
  order: -1;
  min-width: var(--side-min-width);
  max-width: var(--side-max-width);
  border-right: var(--border);
}

:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
  order: 1;
  min-width: var(--side-min-width);
  max-width: var(--side-max-width);
  border: 0, 0, 0, var(--border);
}