/* components/divider/divider.css
 *
 * Section divider — horizontal rule between sections. Pulls color from
 * --color-divider (Design Settings → Divider Color). Per-instance color
 * override via --mvc-divider-color-override inline style.
 */

.mvc-divider {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* ── Spacing (vertical breathing room around the line) ──────────────────── */
.mvc-divider--spacing-none     { padding-block: 0; }
.mvc-divider--spacing-tight    { padding-block: var(--space-4); }
.mvc-divider--spacing-default  { padding-block: var(--space-10); }
.mvc-divider--spacing-roomy    { padding-block: var(--space-16); }
.mvc-divider--spacing-spacious { padding-block: var(--space-24); }

/* ── The line itself ────────────────────────────────────────────────────── */
/* Use a <span> rather than <hr> — hr has cross-browser intrinsic-sizing
   quirks (margin-inline: auto defaults, overflow:hidden) that fight explicit
   width on the element. A block span with border-top renders deterministically. */
.mvc-divider__line {
	display: block;
	box-sizing: border-box;
	border-top: var(--mvc-divider-thickness, 2px)
	            var(--mvc-divider-style, solid)
	            var(--mvc-divider-color-override, var(--color-divider));
	height: 0;
	line-height: 0;
	font-size: 0;
}

/* ── Width (set on the line itself) ─────────────────────────────────────── */
.mvc-divider--width-full   .mvc-divider__line { width: 100%; }
.mvc-divider--width-80     .mvc-divider__line { width: 80%; }
.mvc-divider--width-50     .mvc-divider__line { width: 50%; }
.mvc-divider--width-narrow .mvc-divider__line { width: 200px; }

/* ── Horizontal alignment via margin-inline on the line ─────────────────── */
.mvc-divider--align-left   .mvc-divider__line { margin-inline: 0 auto; }
.mvc-divider--align-center .mvc-divider__line { margin-inline: auto; }
.mvc-divider--align-right  .mvc-divider__line { margin-inline: auto 0; }

/* ── Thickness ──────────────────────────────────────────────────────────── */
.mvc-divider--thickness-hairline { --mvc-divider-thickness: 1px; }
.mvc-divider--thickness-thin     { --mvc-divider-thickness: 2px; }
.mvc-divider--thickness-medium   { --mvc-divider-thickness: 4px; }
.mvc-divider--thickness-thick    { --mvc-divider-thickness: 8px; }

/* ── Style (line pattern) ───────────────────────────────────────────────── */
.mvc-divider--style-solid  { --mvc-divider-style: solid; }
.mvc-divider--style-dashed { --mvc-divider-style: dashed; }
.mvc-divider--style-dotted { --mvc-divider-style: dotted; }