@use './common/var';
@use 'mixins/mixins';

@include mixins.b(divider) {
	background-color: var(--border-color-base);
	position: relative;

	@include mixins.m(horizontal) {
		display: block;
		height: 1px;
		width: 100%;
		margin: 24px 0;
	}

	@include mixins.m(vertical) {
		display: inline-block;
		width: 1px;
		height: 1em;
		margin: 0 8px;
		vertical-align: middle;
		position: relative;
	}

	@include mixins.e(text) {
		position: absolute;
		background-color: var.$color-white;
		padding: 0 20px;
		font-weight: var(--font-weight-medium);
		color: var(--color-text-dark);
		font-size: 14px;

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

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

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