@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

.border {
	border: tokens.$border-width solid tokens.$border !important;
}

.border-md {
	border: tokens.$border-width-md solid tokens.$border !important;
}

.border-lg {
	border: tokens.$border-width-lg solid tokens.$border !important;
}

.border-none {
	border: none !important;
}

// Rules for each side

@each $border-key, $direction in tokens.$logical-directions {
	.border-#{$border-key} {
		border-#{$direction}: tokens.$border-width solid tokens.$border !important;
	}

	.border-#{$border-key}-md {
		border-#{$direction}: tokens.$border-width-md solid tokens.$border !important;
	}

	.border-#{$border-key}-lg {
		border-#{$direction}: tokens.$border-width-lg solid tokens.$border !important;
	}

	.border-#{$border-key}-none {
		border-#{$direction}: 0 !important;
	}
}

@include mixins.tablet {
	.border-tablet {
		border: tokens.$border-width solid tokens.$border !important;
	}

	.border-md-tablet {
		border: tokens.$border-width-md solid tokens.$border !important;
	}

	.border-lg-tablet {
		border: tokens.$border-width-lg solid tokens.$border !important;
	}

	.border-none-tablet {
		border: none !important;
	}

	// Rules for each side

	@each $border-key, $direction in tokens.$logical-directions {
		.border-#{$border-key}-tablet {
			border-#{$direction}: tokens.$border-width solid tokens.$border !important;
		}

		.border-#{$border-key}-md-tablet {
			border-#{$direction}: tokens.$border-width-md solid tokens.$border !important;
		}

		.border-#{$border-key}-lg-tablet {
			border-#{$direction}: tokens.$border-width-lg solid tokens.$border !important;
		}

		.border-#{$border-key}-none-tablet {
			border-#{$direction}: 0 !important;
		}
	}
}

// Radius

.border-radius-sm {
	border-radius: tokens.$border-radius-sm !important;
}

.border-radius {
	border-radius: tokens.$border-radius !important;
}

.border-radius-lg {
	border-radius: tokens.$border-radius-lg !important;
}

.border-radius-rounded {
	border-radius: tokens.$border-radius-rounded !important;
}

.border-radius-none {
	border-radius: 0 !important;
}

// Colors

@each $name, $color-set in tokens.$colors {
	$base: nth($color-set, tokens.$color-index-base);

	.border-color-#{$name} {
		border-color: $base !important;
	}
}

.border-color-accent {
	border-color: tokens.$border-accent !important;
}

.border-high-contrast {
	border: tokens.$border-width solid tokens.$border-white-high-contrast !important;

	&-hover:hover {
		border: tokens.$border-width solid tokens.$border-yellow-high-contrast !important;
	}
}