.drag-handle-bottom,
.drag-handle-top {
  position: sticky;
  width: 100%;
  height: 0.75rem;
  cursor: row-resize;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: transparent;
  border: none;
}

.drag-handle-bottom {
  top: 0;
  margin-top: 0.125rem;
}

.drag-handle-top {
  bottom: 0;
  margin-bottom: 0.125rem;
}

.drag-handle-start,
.drag-handle-end {
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 3.75rem;
  cursor: col-resize;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: transparent;
  border: none;
}

.drag-handle-start {
  position: absolute;
  right: 0;
}

.drag-handle-end {
  position: absolute;
  left: 0;
}

.drag-indicator-horizontal {
  width: 3.75rem;
  height: 0.5rem;
  background: var(--accent-bg-color);
  border-radius: 0.25rem;
  transition: background-color 0.2s;
}

.drag-indicator-vertical {
  width: 0.5rem;
  height: 2.5rem;
  background: var(--accent-bg-color);
  border-radius: 0.25rem;
  transition: background-color 0.2s;
}

.drag-handle-bottom:hover .drag-indicator-horizontal,
.drag-handle-top:hover .drag-indicator-horizontal,
.drag-handle-start:hover .drag-indicator-vertical,
.drag-handle-end:hover .drag-indicator-vertical {
  background: #6c757d;
}
