@use "../abstracts/mixins";

@mixin custom-properties {
	--color-success: limegreen;
	--color-danger: orangered;
	--color-warning: gold;
	--color-info: dodgerblue;
	--color-border: rgba(10, 20, 30, 0.05);
	--color-shadow: rgba(10, 20, 30, 0.1);

	--system-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
	--code-font-family: consolas, monaco, monospace;

	/*******************
	 * Fluid scale.
	 */

	// --fluid-base: 16;        /* px value */
	// --fluid-min-width: 400;  /* px value of smallest mobile breakpoint */
	// --fluid-max-width: 1200; /* px value of larget breakpoint */

	// --fluid-min-rem: calc(var(--fluid-min) / var(--fluid-base) * 1rem);
	// --fluid-max-rem: calc(var(--fluid-max) / var(--fluid-base) * 1rem);
	// --fluid-min-width-rem: calc(var(--fluid-min-width) / var(--fluid-base) * 1rem);
	// --fluid-max-width-rem: calc(var(--fluid-max-width) / var(--fluid-base) * 1rem);

	// --fluid-slope: calc(var(--fluid-max) - var(--fluid-min)) / (var(--fluid-max-width) - var(--fluid-min-width));
	// --fluid-intersection: calc((var(--fluid-min-width) * -1) * var(--fluid-slope) + var(--fluid-min));
	// --fluid-intersection-rem: calc(var(--fluid-intersection) / var(--fluid-base) * 1rem);
	// --fluid-value: clamp(var(--fluid-min-rem), calc(var(--fluid-intersection-rem) + (var(--fluid-slope) * 100) * 1vw), var(--fluid-max-rem));

	/**
	--fluid-value: clamp(
		var(--fluid-min) / var(--fluid-base) * 1rem,
		((((var(--fluid-min-width) * -1) * (var(--fluid-max) - var(--fluid-min)) / (var(--fluid-max-width) - var(--fluid-min-width)) + var(--fluid-min)) / var(--fluid-base) * 1rem) + ((var(--fluid-max) - var(--fluid-min)) / (var(--fluid-max-width) - var(--fluid-min-width)) * 100) * 1vw),
		var(--fluid-max) / var(--fluid-base) * 1rem
	);
	*/

	/*******************
	 * Font size scale.
	 */

	// --font-scale-min: 1.2; // Mobile - Minor Third.
	// --font-scale: 1.25;    // Desktop - Major Third.
	// --fluid-font-size-base-min: 17;
	// --fluid-font-size-base: 18;
	// // Mobile.
	// --fluid-font-size-min-xs: calc(var(--fluid-font-size-min-sm) / var(--font-scale-min));
	// --fluid-font-size-min-sm: calc(var(--fluid-font-size-min-md) / var(--font-scale-min));
	// --fluid-font-size-min-md: var(--fluid-font-size-base-min);
	// --fluid-font-size-min-lg: calc(var(--fluid-font-size-min-md) * var(--font-scale-min));
	// --fluid-font-size-min-xl: calc(var(--fluid-font-size-min-lg) * var(--font-scale-min));
	// --fluid-font-size-min-xxl: calc(var(--fluid-font-size-min-xl) * var(--font-scale-min));
	// --fluid-font-size-min-xxxl: calc(var(--fluid-font-size-min-xxl) * var(--font-scale-min));
	// --fluid-font-size-min-xxxxl: calc(var(--fluid-font-size-min-xxxl) * var(--font-scale-min));
	// // Desktop.
	// --fluid-font-size-xs: calc(var(--fluid-font-size-sm) / var(--font-scale));
	// --fluid-font-size-sm: calc(var(--fluid-font-size-md) / var(--font-scale));
	// --fluid-font-size-md: var(--fluid-font-size-base);
	// --fluid-font-size-lg: calc(var(--fluid-font-size-md) * var(--font-scale));
	// --fluid-font-size-xl: calc(var(--fluid-font-size-lg) * var(--font-scale));
	// --fluid-font-size-xxl: calc(var(--fluid-font-size-xl) * var(--font-scale));
	// --fluid-font-size-xxxl: calc(var(--fluid-font-size-xxl) * var(--font-scale));
	// --fluid-font-size-xxxxl: calc(var(--fluid-font-size-xxxl) * var(--font-scale));

	--font-size-base: 16px;
	--font-scale-responsive: 0.15vw;
	--font-size-xs: calc(var(--font-size-sm) / var(--font-scale));
	--font-size-sm: calc(var(--font-size-md) / var(--font-scale));
	--font-size-md: calc(var(--font-size-base) + var(--font-scale-responsive));
	--font-size-lg: calc(var(--font-size-md) * var(--font-scale));
	--font-size-xl: calc(var(--font-size-lg) * var(--font-scale));
	--font-size-xxl: calc(var(--font-size-xl) * var(--font-scale));
	--font-size-xxxl: calc(var(--font-size-xxl) * var(--font-scale));
	--font-size-xxxxl: calc(var(--font-size-xxxl) * var(--font-scale));

	/*******************
	 * Line height scale.
	 */
	--line-height-scale: 1.125;
	--line-height-1: 1;
	--line-height-xs: calc(var(--line-height-1) * var(--line-height-scale)); // 1.125
	--line-height-sm: calc(var(--line-height-xs) * var(--line-height-scale)); // 1.266
	--line-height-md: calc(var(--line-height-sm) * var(--line-height-scale)); // 1.424
	--line-height-lg: calc(var(--line-height-md) * var(--line-height-scale)); // 1.602

	/*******************
	 * Spacing scale.
	 */

	// This is the original for smaller padding values. Not used for Group/Cover spacing.
	--spacing-base: 16px;
	--spacing-xxxxs: 2px;
	--spacing-xxxs: 4px;
	--spacing-xxs: 6px;
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: var(--spacing-base);
	--spacing-lg: calc(var(--spacing-md) * var(--spacing-scale));
	--spacing-xl: calc(var(--spacing-lg) * var(--spacing-scale));
	--spacing-xxl: calc(var(--spacing-xl) * var(--spacing-scale));
	--spacing-xxxl: calc(var(--spacing-xxl) * var(--spacing-scale));
	--spacing-xxxxl: calc(var(--spacing-xxxl) * var(--spacing-scale));

	--side-spacing: calc(var(--spacing-md) + 2vw);

	/*******************
	 * Padding scale.
	 */

	--padding-base: 8px;
	--padding-xs: var(--padding-base);
	--padding-sm: calc(var(--padding-base) * (var(--padding-scale) * 2));
	--padding-md: calc(var(--padding-sm) * var(--padding-scale));
	--padding-lg: calc(var(--padding-md) * var(--padding-scale));
	--padding-xl: calc(var(--padding-lg) * var(--padding-scale));
	--padding-xxl: calc(var(--padding-xl) * var(--padding-scale)); // Only for dividers.

	/*******************
	 * Misc.
	 */

	--viewport-width: calc(100vw - var(--scrollbar-width, 0px)); // Needs px value for calculations.
	--row-gap: var(--spacing-md);
	--column-gap: var(--spacing-md);
	--wrap-max-width: var(--breakpoint-xl);
	--sidebar-width: 300px; // Google ads.
	--content-max-width: var(--breakpoint-xl);

	--border-radius: 4px;
	--border-width: 1px;
	--border: var(--border-width) solid var(--color-border);
	--shadow: 0 0.25em 1em 0 var(--color-shadow);
	--drop-shadow: drop-shadow(0 0.25em 1em var(--color-shadow));
	--inherit: inherit; // SCSS kept stripping out inherit on font-family so I'm doing this until I can figure out why. See #582.

	--transition-property: all;
	--transition-duration: 0.15s;
	--transition-timing-function: ease-in-out;
	--transition: var(--transition-property) var(--transition-duration) var(--transition-timing-function);

	--content-sidebar-wrap-margin-top: var(--spacing-xxl);
	--content-sidebar-wrap-margin-bottom: var(--spacing-xxxl);
	--content-sidebar-gap: calc(var(--column-gap) * 3);
}

// @supports (width:100dvw) {

// 	:root {
// 		--viewport-width: 100dvw;
// 		--scrollbar-width: 0px; // Needs px value for calculations.
// 	}
// }

:root {

	@include custom-properties;
}

@include mixins.mq(false, md) {

	:root {
		--font-scale: var(--font-scale-mobile, 1.125);       // Major second.
		--spacing-scale: var(--spacing-scale-mobile, 1.333); // Perfect fourth.
		--padding-scale: var(--padding-scale-mobile, 1.618); // Golden ratio.
	}
}

@include mixins.mq(md, lg) {

	:root {
		--font-scale: var(--font-scale-tablet, 1.2);         // Minor third.
		--spacing-scale: var(--spacing-scale-tablet, 1.414); // Augmented fourth.
		--padding-scale: var(--padding-scale-tablet, 1.778); // Minor seventh.
	}
}

@include mixins.mq(lg) {

	:root {
		--font-scale: var(--font-scale-desktop, 1.25);      // Major Third.
		--spacing-scale: var(--spacing-scale-desktop, 1.5); // Major fifth.
		--padding-scale: var(--padding-scale-desktop, 2);   // Octave.
	}
}