@use 'sass:string';

$border-positions: (
	'full': '',
	'top': '-top',
	'right': '-right',
	'bottom': '-bottom',
	'left': '-left'
);

@each $position-key, $position-val in $border-positions {
	.border#{$position-val} {
		border#{$position-val}-width: 0.0625rem;
		border#{$position-val}-style: solid;
	}

	.border#{$position-val}-solid {
		border#{$position-val}-style: solid;
	}

	.border#{$position-val}-dashed {
		border#{$position-val}-style: dashed;
	}

	.border#{$position-val}-dotted {
		border#{$position-val}-style: dotted;
	}

	@for $i from 0 through 10 {
		$multiple: $i * 0.0625;

		.border#{$position-val}-#{$i} {
			border#{$position-val}-width: string.unquote('#{$multiple}rem');
		}
	}
}

.border-none {
	border: none;
}

.collapse-separate {
	border-collapse: separate;
}

.border-spacing-extra-small {
	border-spacing: var(--padding-extra-small);
}

// Device Breakpoints End