@import url("https://esm.sh/resizable-panels-zero@0.0.1/dist/resizable-panels-zero.css");

resizable-group {
  --resizable-separator-size: var(--border);
  --resizable-separator-color: var(--color-border);
  --resizable-separator-color-hover: var(--color-border);
  --resizable-separator-color-active: var(--color-border);
  --resizable-separator-color-disabled: var(--color-border-light);

  --resizable-focus-ring-width: var(--border-2);
  --resizable-focus-ring-color: var(--color-selected-dark);

  --resizable-overlay-size: var(--border-2);
  --resizable-overlay-color: var(--color-border);
  --resizable-overlay-color-active: var(--color-border-dark);

  --resizable-transition-duration: var(--time-150);
  --resizable-transition-easing: var(--ease-out-3);
}

resizable-separator {
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 1;

  &::after {
    background-color: var(--color-border);
    border-radius: var(--rounded-lg);
    content: "";
    flex-shrink: 0;
  }

  &[aria-orientation="vertical"]::after {
    block-size: var(--size-6); inline-size: var(--size-1);
  }

  &[aria-orientation="horizontal"]::after {
    block-size: var(--size-1); inline-size: var(--size-6);
  }
}