.resizable-horizontal {
  display: flex;
  flex-direction: row;
}

.resizable-vertical {
  display: flex;
  flex-direction: column;
}

.gutter {
  align-items: center;
  background-image: linear-gradient(var(--color-border), var(--color-border));
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}

.gutter::after {
  background-color: var(--color-border);
  border-radius: var(--rounded-lg);
  content: "";
}

.gutter-horizontal {
  background-size: var(--border) 100%;
  cursor: col-resize;
}

.gutter-horizontal::after {
  block-size: var(--size-6); inline-size: var(--size-1);
}

.gutter-vertical {
  background-size: 100% var(--border);
  cursor: row-resize;
}

.gutter-vertical::after {
  block-size: var(--size-1); inline-size: var(--size-6);
}