@import "./split-pane";
@import "./split-pane.md.vars";

// Split Pane
// --------------------------------------------------

:host {
  --border: #{$split-pane-md-border};
  --side-min-width: #{$split-pane-md-side-min-width};
  --side-max-width: #{$split-pane-md-side-max-width};
}

:host(.split-pane-visible) ::slotted(.split-pane-side) {
  min-width: var(--side-min-width);
  max-width: var(--side-max-width);

  border-right: var(--border);
  border-left: 0;
}

:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
  min-width: var(--side-min-width);
  max-width: var(--side-max-width);

  border-right: 0;
  border-left: var(--border);
}
