@use "../../../010-settings/"as *;
@use "../../../050-layout/basics"as *;

//== Divider
//
//##
$il-divider-bg: $il-main-bg;
$il-divider-color: $il-text-color;
$il-divider-color-invert: $il-text-color-invert;

h4.il-divider {
	display: flex;
	flex-direction: row;
}

h4.il-divider:before,
h4.il-divider:after {
	content: "";
	flex: 1 1;
	border-bottom: 2px solid $il-divider-color-invert;
	margin: auto;
}

h4.il-divider:before {
	margin-right: 0.5em;
}
h4.il-divider:after {
	margin-left: 0.5em;
}

.engaged ~ ul > li > h4.il-divider {
	padding: $il-padding-small-vertical $il-padding-small-horizontal;
	margin-bottom: 0px;
	background-color: $il-divider-bg;
	display: block;
	font-size: $il-font-size-small;
	line-height: $il-line-height-small;
	color: $il-divider-color;
}

hr.il-divider-with-label {
	display: none;
}

.il-divider-vertical:before {
	content: "\2022";
	padding-left: $il-padding-small-horizontal;
	padding-right: $il-padding-small-horizontal;
}