[data-scope="splitter"][data-part="root"][data-orientation="horizontal"] {
  height: 300px;
}

[data-scope="splitter"][data-part="root"][data-orientation="vertical"] {
  width: 800px;
  height: 600px;
}

[data-scope="splitter"][data-part="panel"] {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid lightgray;
  overflow: auto;
}

[data-scope="splitter"][data-part="resize-trigger"][data-orientation="horizontal"] {
  width: 8px;
}

[data-scope="splitter"][data-part="resize-trigger"][data-orientation="vertical"] {
  height: 8px;
}

[data-scope="splitter"][data-part="resize-trigger"] {
  background: #ebebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
  outline: 0;
}

[data-scope="splitter"][data-part="resize-trigger"][data-focus] {
  background: #b0baf1;
}

[data-scope="splitter"][data-part="resize-trigger"]:active {
  background: #3f51b5;
  color: white;
}

[data-scope="splitter"][data-part="resize-trigger"][data-disabled] {
  opacity: 0.5;
}

[data-scope="splitter"][data-part="resize-trigger"] .bar {
  background-color: currentColor;
}

[data-scope="splitter"][data-orientation="horizontal"] .bar {
  width: 2px;
  height: 40px;
}

[data-scope="splitter"][data-orientation="vertical"] .bar {
  height: 2px;
  width: 40px;
}
