.p-splitter {
  @apply flex flex-wrap rounded-md border border-surface-200 bg-surface-0 text-surface-700 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-splitter-vertical {
  @apply flex-col;
}

.p-splitter-gutter {
  @apply z-10 flex flex-shrink-0 flex-grow-0 items-center justify-center bg-surface-200 dark:bg-surface-700;
}

.p-splitter-gutter-handle {
  @apply rounded-md bg-transparent transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary;
}

.p-splitter-horizontal.p-splitter-resizing {
  @apply cursor-col-resize select-none;
}

.p-splitter-vertical.p-splitter-resizing {
  @apply cursor-row-resize select-none;
}

.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
  @apply h-[24px] w-full;
}

.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
  @apply h-full w-[24px];
}

.p-splitter-horizontal > .p-splitter-gutter {
  @apply cursor-col-resize;
}

.p-splitter-vertical > .p-splitter-gutter {
  @apply cursor-row-resize;
}

.p-splitterpanel {
  @apply flex-grow overflow-hidden;
}

.p-splitterpanel-nested {
  @apply flex;
}

.p-splitterpanel .p-splitter {
  @apply flex-grow border-none;
}
