/* #Fancy titles and separators
================================================== */

/* !- Thin divider */

	.divider-thin (@color) {
		border-style: solid;
		border-width: 1px;
		border-color: @color;

		border-left: none;
		border-right: none;
	}

	.divider-horisontal (@color) {
		border-style: @divider-thin-style;
		border-width: @divider-thin-height;
		border-color: @color;

		border-top: none;
		border-right: none;
		border-bottom: none;
	}

/* !- Thick divider */
	.hr-style (@style, @color) when (@style = style-5) {
		height: 0;
		border: none;
		border-top: solid 5px @color;
	}

	.hr-thick {
		.hr-style (@divider-thick-switch, @divider-color); 
	}

	.hr-breadcrumbs .breadcrumbs:after {
		.hr-style (@divider-thick-bread-switch, @divider-color); 
	}

	.hr-thick {
		border-color: fade(@base-color,10%);
	}

	.hr-thin {
      border-style: solid;
      border-width: 1px;
      border-color: var(--the7-divider-color);

      border-left: none;
      border-right: none;
      border-bottom: none;
	}

	.hr-thin.style-dashed {
		border-top-style: dashed;
		border-bottom: none;
	}
	.hr-thin.style-dotted {
		border-top-style: dotted;
		border-bottom: none;
	}
	.hr-thin.style-double {
		border-top-style: double;
		border-top-width: 3px;
		border-bottom: none;
	}

.accent-border-color .separator-holder,
.accent-border-color.hr-thin,
.accent-border-color.hr-thick {
	border-color: var(--the7-accent-color);
}
.accent-border-color.hr-thin.style-line,
.accent-border-color.hr-thick {
	.accent-gradient & {
		border-width: 0;
		border-color: var(--the7-accent-color);
		.border-gradient(@accent-text-color-2);
	}
}

.dt-fancy-title.bg-on,
hr.gf_rule {
	.transparent-bg-mixin;
}
.accent-border-color .dt-fancy-title.bg-on {
	.accent-bg-mixin;
}
.accent-title-color .dt-fancy-title {
	.color-accent;
}
.title-color .dt-fancy-title {
	.header-color;
}
.dt-fancy-separator,
.dt-fancy-separator * {
	.color-base-transparent;
}
.separator-holder {
	border-color: var(--the7-divider-color);
}
.separator-holder,
.accent-border-color .bg-on .separator-holder {
	.transparent-border-mixin;
}
.dt-fancy-title.bg-on {
	font-size: calc(var(--the7-base-font-size) * 2);
	line-height: calc(var(--the7-base-font-size) * 2);
}
.text-small .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-text-small-font-size) * 2);
	line-height: calc(var(--the7-text-small-font-size) * 2);
}
.text-big .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-text-big-font-size) * 2);
	line-height: calc(var(--the7-text-big-font-size) * 2);
}
.h1-size .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-h1-font-size)*2);
	line-height:calc(var(--the7-h1-font-size)*2); 
}
.h2-size .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-h2-font-size)*2);
	line-height:calc(var(--the7-h2-font-size)*2);
}
.h3-size .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-h3-font-size)*2);
	line-height:calc(var(--the7-h3-font-size)*2);
}
.h4-size .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-h4-font-size)*2);
	line-height:calc(var(--the7-h4-font-size)*2);
}
.h5-size .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-h5-font-size)*2);
	line-height:calc(var(--the7-h5-font-size)*2);
}
.h6-size .dt-fancy-title.bg-on {
	min-height: calc(var(--the7-h6-font-size)*2);
	line-height:calc(var(--the7-h6-font-size)*2);
}