:host {
  --background: var(--bp-object-border-color-200);
  --width: var(--bp-object-border-width-100);
  --height: 100%;
  --cursor: col-resize;
  display: block;
  height: var(--height);
  position: relative;
}

[part='internal'] {
  width: max(4px, calc(var(--width) * 2));
  height: var(--height);
  border-right: var(--width) solid var(--background);
  cursor: var(--cursor);
  display: block;
}

[part='internal']::before {
  --line-height: min(calc(var(--height) - 8px), 32px);
  background: var(--background);
  width: var(--bp-object-border-width-100);
  display: block;
  content: '';
  height: var(--line-height);
  position: absolute;
  top: calc((var(--height) - var(--line-height)) / 2);
  left: 0;
}

:host(:state(readonly)),
:host(:state(disabled)) {
  --cursor: initial;
}

:host(:state(readonly)) [part='internal']::before {
  display: none;
}

:host(:focus) {
  outline: none;
}

:host(:focus) [part='internal'] {
  outline: var(--bp-interaction-outline); /* stylelint-disable-line declaration-block-no-duplicate-properties */
  outline: var(--bp-interaction-outline-webkit); /* stylelint-disable-line declaration-block-no-duplicate-properties */
}
