.container {
  display: flex;
  inline-size: 100%;
  overflow: hidden;
  min-inline-size: 0;
  min-block-size: 0;
}

.container[data-fill-viewport='true'] {
  block-size: 100%;
  max-block-size: 100%;
  height: 100%;
  max-height: 100%;
}

.container[data-direction='horizontal'] {
  flex-direction: row;
}

.container[data-direction='vertical'] {
  flex-direction: column;
}

/* ===== Primary pane ===== */
.primary {
  flex: 0 0 var(--split-pane-primary-size, 300px);
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* ===== Secondary pane ===== */
.secondary {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* ===== Gutter (spacing + hit area wrapper) ===== */
.gutter {
  position: relative;
  flex: 0 0 var(--split-pane-gutter, 8px);
  background: transparent;
  z-index: 1;
}

.container[data-direction='vertical'] .gutter {
  inline-size: 100%;
  block-size: var(--split-pane-gutter, 8px);
}

/* ===== Resizer (interaction element) ===== */
.resizer {
  position: absolute;
  inset: 0;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  outline: none;
}

.container[data-direction='vertical'] .resizer {
  cursor: row-resize;
}

/* Focus ring for keyboard resizing */
.resizer:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ===== Divider line ===== */
.resizer::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: 50%;
  inline-size: var(--border-width-thin);
  background-color: var(--color-border-subtle);
  opacity: 0;
  transform: translateX(-50%);
  transition:
    opacity var(--transition-fast) var(--ease-standard),
    background-color var(--transition-fast) var(--ease-standard);
}

/* Vertical divider */
.container[data-direction='vertical'] .resizer::after {
  inset-inline: 0;
  inset-block: 50%;
  inline-size: 100%;
  block-size: var(--border-width-thin);
  transform: translateY(-50%);
}

/* ===== Divider visibility modes ===== */
.container[data-divider='hover'] .resizer:hover::after,
.container[data-divider='hover'] .resizer:active::after {
  opacity: 1;
  background-color: var(--color-border-strong);
}

.container[data-divider='always'] .resizer::after {
  opacity: 1;
}

.container[data-divider='never'] .resizer::after {
  display: none;
}

.container[data-divider='hover'] .resizer:active::after,
.container[data-divider='always'] .resizer:active::after {
  background-color: var(--color-brand);
}