.panelGroup {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel {
  display: flex;
  flex-direction: column;
  background-color: var(--card);
  border-radius: var(--radius);
  overflow: auto;
  padding: var(--spacing-4);
}

.resizeHandle {
  position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  transition: background-color var(--animation-duration-fast) ease;
}

.resizeHandle[data-orientation="horizontal"] {
  width: 0.25rem;
  margin: 0 0.25rem;
  cursor: col-resize;
}

.resizeHandle[data-orientation="vertical"] {
  height: 0.25rem;
  margin: 0.25rem 0;
  cursor: row-resize;
}

.resizeHandle:hover {
  background-color: var(--muted);
}

.resizeHandle:active {
  background-color: var(--primary);
}

.resizeHandleGrip {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--muted-foreground);
  transition: background-color var(--animation-duration-fast) ease;
}

.resizeHandle:hover .resizeHandleGrip {
  background-color: var(--muted);
  color: var(--foreground);
}

.resizeHandle:active .resizeHandleGrip {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.gripIcon {
  color: inherit;
}