@import "vars";

@mixin darkMode() {
	@media (prefers-color-scheme: dark) {
		@content;
	}
}

@mixin surface($shadowStrength: 0) {
	background-color: var(--surface);
	color: var(--on-surface);

	a {
		color: var(--primary-on-surface);

		&:hover {
			color: var(--primary-light-on-surface);
		}
	}

	:global(a) {
		color: var(--primary-on-surface);

		&:hover {
			color: var(--primary-light-on-surface);
		}
	}


	// Buttons
	button, .button {
		&:not(.bold) {
			--background-color: var(--surface);

			&:hover::after {
				--background-color: var(--on-surface);

				:global(&) {
					--background-color: var(--on-surface);
				}
			}
		}
	}


	// States modifiers
	.primary:not(.bold) {
		--color: var(--primary-on-surface);
		--background-color: var(--surface);
	}
	.info:not(.bold) {
		--color: var(--info-on-surface);
		--background-color: var(--surface);
	}
	.success:not(.bold) {
		--color: var(--success-on-surface);
		--background-color: var(--surface);
	}
	.warning:not(.bold) {
		--color: var(--warning-on-surface);
		--background-color: var(--surface);
	}
	.error:not(.bold), .danger:not(.bold) {
		--color: var(--error-on-surface);
		--background-color: var(--surface);
	}

	@if ($shadowStrength > 0) {
		box-shadow: 0 #{$shadowStrength}px #{$shadowStrength}px #00000045;
	}
}

@mixin subsurface($shadowStrength: 0) {
	@include surface($shadowStrength);

	background-color: var(--subsurface);
	color: var(--on-subsurface);
}


// --- Responsivity ---
@mixin mobile-le {
	@media (max-width: $mobileThreshold - 1px) {
		@content;
	}
}

@mixin mobile-ge {
	@content;
}

@mixin medium-le {
	@media (max-width: $desktopThreshold - 1px) {
		@content;
	}
}

@mixin medium-ge {
	@media (min-width: $mobileThreshold) {
		@content;
	}
}

@mixin large-le {
	@content;
}

@mixin large-ge {
	@media (min-width: $desktopThreshold) {
		@content;
	}
}

@mixin container {
	width: 100%;
	max-width: 100%;
	padding-left: 8px;
	padding-right: 8px;

	@include medium-ge {
		margin-left: auto;
		margin-right: auto;
		padding-left: 16px;
		padding-right: 16px;
	}

	@include large-ge {
		width: $desktopThreshold;
	}
}

@mixin fake-hide {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}