/* ─── Divider ─────────────────────────────────────────────────────────────────
   Values: site/tokens.css
   Consumers: site/preview/divider.html + src/components/Divider/Divider.tsx
   States: data-attributes only
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────────────────────── */

.ds-divider {
  border: none;
  margin: 0;
  flex-shrink: 0;
  background: var(--ds-stroke-low);
}

/* ── Orientation ────────────────────────────────────────────────────────────── */
/* Линия = 1px hairline: осознанное исключение из sub-4px calc-правила (never-do).
   calc(comp-unit*0.25) дал бы 0.875px в compact-density → sub-pixel, линия пропадает.
   Hairline по определению не масштабируется density — держим 1px. */

.ds-divider[data-orientation='horizontal'] {
  width: 100%;
  height: 1px;
  display: block;
}

.ds-divider[data-orientation='vertical'] {
  width: 1px;
  height: 100%;
  display: inline-block;
  align-self: stretch;
}

/* ── Contrast (line color, not weight — толщина всегда 1px) ──────────────────── */

.ds-divider[data-contrast='low']    { background: var(--ds-stroke-low); }
.ds-divider[data-contrast='medium'] { background: var(--ds-stroke-mid); }
.ds-divider[data-contrast='high']   { background: var(--ds-stroke-high); }

/* ── Padding (space around the line) — через comp-unit, реагирует на density ── */

.ds-divider[data-orientation='horizontal'][data-padding='2'] { margin-block:  calc(var(--ds-comp-unit) * 0.5); }
.ds-divider[data-orientation='horizontal'][data-padding='4'] { margin-block:  var(--ds-comp-unit); }

.ds-divider[data-orientation='vertical'][data-padding='2'] { margin-inline: calc(var(--ds-comp-unit) * 0.5); }
.ds-divider[data-orientation='vertical'][data-padding='4'] { margin-inline: var(--ds-comp-unit); }