@use "../colors";
@use "../variables";

// Workaround until we get Relative Color Syntax
// https://codepen.io/bramus/pen/VwMZOQK
// https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
// https://github.com/WebKit/WebKit/commit/1890bfb551da24735804cb1a3d5f14b210f7c7b8
@mixin divider($position: "top", $slot: "before") {
	--db-divider-bg-color: #{colors.$db-adaptive-on-bg-basic-emphasis-60-default};

	position: relative;

	&[data-emphasis="strong"] {
		--db-divider-bg-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
	}

	&::#{$slot} {
		content: "";
		background-color: var(--db-divider-bg-color);
		position: absolute;

		@if $position == "top" {
			block-size: variables.$db-border-height-3xs;
			inset-block-start: 0;
			inset-inline: 0;
			/* stylelint-disable-next-line at-rule-empty-line-before */
		} @else if $position == "bottom" {
			block-size: variables.$db-border-height-3xs;
			inset-block-end: 0;
			inset-inline: 0;
			/* stylelint-disable-next-line at-rule-empty-line-before */
		} @else if $position == "left" {
			inline-size: variables.$db-border-height-3xs;
			inset-inline-start: 0;
			inset-block: 0;
			/* stylelint-disable-next-line at-rule-empty-line-before */
		} @else if $position == "right" {
			inline-size: variables.$db-border-height-3xs;
			inset-inline-end: 0;
			inset-block: 0;
		}
	}

	@media (forced-colors: active) {
		// border is the better implementation, but border height changes in windows based on pixel density
		// we use it as a fallback for color contrast
		/* stylelint-disable-next-line db-ui/use-border-color */
		border: variables.$db-border-height-3xs solid var(--db-divider-bg-color);
	}
}