@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) {
  @include border(0, var(--border), 0, 0);

  min-width: var(--side-min-width);
  max-width: var(--side-max-width);
}

:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
  @include border(0, 0, 0, var(--border));

  min-width: var(--side-min-width);
  max-width: var(--side-max-width);
}
