@use 'sass:color';
@use 'sass:math';

@use 'common/var' as *;
@use 'mixins/mixins' as *;

@include b(divider) {
	position: relative;

	@include m(horizontal) {
		@include e(inner) {
			display: block;
			height: 1px;
			width: 100%;
			margin: 24px 0;
			border-top: 1px getCssVar('border-color') getCssVar('border-style');
		}
	}

	@include m(vertical) {
		@include e(inner) {
			display: block;
			width: 1px;
			height: 100%;
			margin: 0 8px;
			vertical-align: middle;
			position: relative;
			border-left: 1px getCssVar('border-color') getCssVar('border-style');
		}
	}

	@include m(horizontal) {
		@include when(gradient) {
			@include e(inner) {
				border-image-slice: 1;
				border-image-source: linear-gradient(to left, transparent, getCssVar('border-color'), transparent);
			}
		}
	}

	@include m(vertical) {
		@include when(gradient) {
			@include e(inner) {
				border-image: linear-gradient(to bottom, transparent, getCssVar('border-color'), transparent) 1 100%;
			}
		}
	}

	@include e(text) {
		position: absolute;
		background-color: getCssVar('bg-color');
		padding: 0 20px;
		font-weight: 500;
		color: getCssVar('text-color', 'primary');
		font-size: 14px;

		@include when(left) {
			left: 20px;
			transform: translateY(-50%);
		}

		@include when(center) {
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
		}

		@include when(right) {
			right: 20px;
			transform: translateY(-50%);
		}
	}
}