.panelGroup {
  display: flex;
  width: 100%;
  height: 100%;
}

.panelGroup[data-panel-group-direction='vertical'] {
  flex-direction: column;
}

.handle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.handle::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 2px;
  content: '';
  background-color: transparent;
  transition: background-color var(--default-hover-animation-duration)
    var(--default-timing-function);
}

.handle[data-resize-handle-state='hover']::after,
.handle[data-resize-handle-state='drag']::after {
  background-color: var(--pane-border-hover);
}

.handle:focus-visible {
  outline: none;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--ring-color);
}

.handle[data-panel-group-direction='vertical'] {
  width: 100%;
  height: 1px;
}

.handle[data-panel-group-direction='vertical']::after {
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.handle[data-panel-group-direction='vertical'] > div {
  transform: rotate(90deg);
}

.handleIcon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 16px;
  background-color: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
}

.panelAnimating {
  transition: all 200ms linear;
}

.gripIcon {
  width: 10px;
  height: 10px;
}