:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  display: block;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.split-layout {
  display: flex;
}

.split-layout--horizontal .split-layout__start-element {
  width: 50%;
}
.split-layout--horizontal .split-layout__resizer {
  background-color: #cbd5e0;
  cursor: ew-resize;
  height: 100%;
  width: 2px;
}
.split-layout--horizontal .split-layout__end-element {
  flex: 1;
}

.split-layout--vertical {
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}
.split-layout--vertical .split-layout__start-element {
  max-height: 75%;
}
.split-layout--vertical .split-layout__resizer {
  background-color: #cbd5e0;
  cursor: ns-resize;
  width: 100%;
  height: 2px;
}
.split-layout--vertical .split-layout__end-element {
  flex: 1;
}