.sortable__grip {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--control-h-sm);
  block-size: var(--control-h-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-subtle);
  cursor: grab;
  touch-action: none;
}

.sortable__grip svg {
  inline-size: var(--icon-lg);
  block-size: var(--icon-lg);
}

.sortable--dragging {
  opacity: 0.5;
}

.sortable--before {
  box-shadow: 0 calc(var(--space-hair) * -2) 0 var(--color-accent);
}

.sortable--after {
  box-shadow: 0 calc(var(--space-hair) * 2) 0 var(--color-accent);
}

@media (hover: hover) {
  .sortable__grip:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
}