/*
 * ILM Components -- Divider.
 *
 * An `<hr>`, which browsers give a default border, margin and `overflow:
 * hidden`. All of it is reset before anything is set, so that the appearance
 * comes from the settings and not from what a particular browser thought an
 * `<hr>` should look like.
 *
 * The line is `border-block-start` alone -- one edge, so `thickness` means the
 * thickness of the line rather than of a box.
 */

.ilm-component--layout-divider {
	border: 0;
	border-block-start: var(--ilm-c-rule-width, 1px) var(--ilm-c-rule-style, solid) var(--ilm-color-border, #d7dade);
	margin-block: var(--ilm-c-space);
	margin-inline: var(--ilm-c-rule-inline-start, 0) var(--ilm-c-rule-inline-end, auto);
	inline-size: var(--ilm-c-rule-size, 100%);
	block-size: 0;
}

.ilm-component--layout-divider.ilm-line-solid { --ilm-c-rule-style: solid; }
.ilm-component--layout-divider.ilm-line-dashed { --ilm-c-rule-style: dashed; }
.ilm-component--layout-divider.ilm-line-dotted { --ilm-c-rule-style: dotted; }

.ilm-component--layout-divider.ilm-thick-thin { --ilm-c-rule-width: 1px; }
.ilm-component--layout-divider.ilm-thick-medium { --ilm-c-rule-width: 2px; }
.ilm-component--layout-divider.ilm-thick-thick { --ilm-c-rule-width: 4px; }

.ilm-component--layout-divider.ilm-rule-full { --ilm-c-rule-size: 100%; }
.ilm-component--layout-divider.ilm-rule-wide { --ilm-c-rule-size: 75%; }
.ilm-component--layout-divider.ilm-rule-half { --ilm-c-rule-size: 50%; }
.ilm-component--layout-divider.ilm-rule-short { --ilm-c-rule-size: 25%; }

/*
 * Alignment is expressed as which margin is `auto`, which is the only way to
 * place a sized block inside its container. `start` and `end` are logical, so
 * a right-to-left page mirrors them without a second stylesheet.
 */
.ilm-component--layout-divider.ilm-ralign-start {
	--ilm-c-rule-inline-start: 0;
	--ilm-c-rule-inline-end: auto;
}

.ilm-component--layout-divider.ilm-ralign-center {
	--ilm-c-rule-inline-start: auto;
	--ilm-c-rule-inline-end: auto;
}

.ilm-component--layout-divider.ilm-ralign-end {
	--ilm-c-rule-inline-start: auto;
	--ilm-c-rule-inline-end: 0;
}