info {
	"name": "root-style",
	"type": "style"
}

style {
	@important: ~"";

	@color-movement: 10%;
	
	* {
		box-sizing: content-box;
	}

	@primary: @websomPrimaryLight;
		@dark-mode-primary: @websomPrimaryDark;
	
	@tertiary: @websomTertiaryLight;
		@dark-mode-tertiary: @websomTertiaryDark;

	@secondary: @websomSecondaryLight;
		@dark-mode-secondary: @websomSecondaryDark;

	@{important}:root {

		@contrast: rgba(white, 100%);

		@set-contrast-dark: #262626;
		@set-contrast-light: #e1e1e1;

		--mobile: 790px;
		--tablet: 990px;
		--desktop: 1200px;
		
		.define-color(light-mode-primary, @primary);
		.define-color(light-mode-secondary, @secondary);
		.define-color(light-mode-tertiary, @tertiary);

		.define-color(dark-mode-primary, @dark-mode-primary);
		.define-color(dark-mode-secondary, @dark-mode-secondary);
		.define-color(dark-mode-tertiary, @dark-mode-tertiary);

		/*--secondary: @secondary;
			--contrast-secondary: contrast(@secondary);
			--secondary-light: lighten(@secondary, @color-movement);
				--contrast-secondary-light: contrast($--secondary-light);
			--secondary-dark: darken(@secondary, @color-movement);
				--contrast-secondary-dark: contrast($--secondary-light);

		--dark-mode-secondary: @dark-mode-secondary;
			--dark-mode-contrast-secondary: contrast(@dark-mode-secondary);
			--dark-mode-secondary-light: lighten(@dark-mode-secondary, @color-movement);
				--dark-mode-contrast-secondary-light: contrast($--dark-mode-secondary-light);
			--dark-mode-secondary-dark: darken(@dark-mode-secondary, @color-movement);
				--dark-mode-contrast-secondary-dark: contrast($--dark-mode-secondary-light);
		
		--tertiary: @tertiary;
			--contrast-tertiary: contrast(@tertiary);
			--tertiary-light: lighten(@tertiary, @color-movement);
				--contrast-tertiary-light: contrast($--tertiary-light);
			--tertiary-dark: darken(@tertiary, @color-movement);
				--contrast-tertiary-dark: contrast($--tertiary-light);
		
		--dark-mode-tertiary: @dark-mode-tertiary;
			--dark-mode-contrast-tertiary: contrast(@dark-mode-tertiary);
			--dark-mode-tertiary-light: lighten(@dark-mode-tertiary, @color-movement);
				--dark-mode-contrast-tertiary-light: contrast($--dark-mode-tertiary-light);
			--dark-mode-tertiary-dark: darken(@dark-mode-tertiary, @color-movement);
				--dark-mode-contrast-tertiary-dark: contrast($--dark-mode-tertiary-light);*/

		/*--color: var(--primary);
		--color-light: var(--primary-light);
		--color-dark: var(--primary-dark);

		--contrast: var(--contrast-primary);
		--contrast-light: var(--contrast-primary-light);
		--contrast-dark: var(--contrast-primary-dark);*/

		--transition: 0.333333s;
		--transition-color: 0.11111s;
		--transition-movement: var(--transition);

		--transition-easing: ease-in-out;
		--transition-easing-movement: ease-in-out;

		--light-background: #f5f5f5;
			--light-background-contrast: #1a1a1a;
			--light-background-overlay: #fdfdfd;
			--light-background-tint: #eeeeee;
			--light-background-center: #eeeeee;
		
		--dark-background: #1a1a1a;
			--dark-background-contrast: #fdfdfd;
			--dark-background-overlay: #232323;
			--dark-background-tint: #2b2b2b;
			--dark-background-center: #525252;

		--light-background: @websomBackgroundLight;
			--light-background-contrast: contrast(@websomBackgroundLight);
			--light-background-overlay: mix(contrast(@websomBackgroundLight), @websomBackgroundLight, 5%);
			--light-background-tint: lighten(@websomBackgroundLight,7%);
			--light-background-center: mix(contrast(@websomBackgroundLight), @websomBackgroundLight, 35%);
			--light-background-diff: mix(contrast(@websomBackgroundLight), @websomBackgroundLight, 2%);
		
		--dark-background: @websomBackgroundDark;
			--dark-background-contrast: contrast(@websomBackgroundDark);
			--dark-background-overlay: mix(contrast(@websomBackgroundDark), @websomBackgroundDark, 5%);
			--dark-background-tint: lighten(@websomBackgroundDark, 7%);
			--dark-background-center: mix(contrast(@websomBackgroundDark), @websomBackgroundDark, 35%);
			--dark-background-diff: mix(contrast(@websomBackgroundDark), @websomBackgroundDark, 2%);

		--background: var(--light-background);
		--background-contrast: var(--light-background-contrast);
		--background-overlay: var(--light-background-overlay);
		--background-overlay-contrast: var(--light-background-contrast);
		--background-tint: var(--light-background-tint);
		--background-tint-contrast: var(--light-background-contrast);
		--background-center: var(--light-background-center);
		--background-center-contrast: var(--light-background-contrast);
		--background-diff: var(--light-background-diff);
		--background-diff-contrast: var(--light-background-contrast);

		.define-color(light-mode-mute, rgba(0, 0, 0, 0.1), @set-contrast-dark, $--light-background);
		.define-color(dark-mode-mute, rgba(255, 255, 255, 0.1), @set-contrast-light, $--dark-background);

		.define-color(light-mode-disabled, darken($--light-background, 20%), darken($--light-background, 35%), $--light-background);
		.define-color(dark-mode-disabled, lighten($--dark-background, 20%), lighten($--dark-background, 35%), $--dark-background);

		--base-size: 12px;

		--base-height: calc(var(--base-size) * 3);

		--nav-height: calc(var(--base-size) * 6);

		--padding-h: calc(var(--base-size) * 2);
		--padding-v: 0px;

		--padding-small-h: calc(var(--base-size) * 1.5);
		--padding-small-v: 0px;

		--cursor-action: pointer;

		--z-above-modal: 1002;
		--z-modal: 1001;
		--z-below-modal: 1000;

		--z-above-absolute-top: 10002;
		--z-absolute-top: 10001;
		--z-below-absolute-top: 10000;

		--z-above-nav: 151;
		--z-nav: 150;
		--z-below-nav: 149;

		--z-above-overlay: 202;
		--z-overlay: 201;
		--z-below-overlay: 200;

		--modal-width: 50%;

		--modal-test: @small;

		.small({
			--modal-width: calc(100% - 50px);
		});

		.medium({
			--modal-width: 70%;
		});

		.define-color(light-mode-success, @websomSuccessLight);
		.define-color(light-mode-danger, @websomDangerLight);
		.define-color(light-mode-warning, @websomWarningLight);
		.define-color(light-mode-info, @websomInfoLight);

		.define-color(dark-mode-success, @websomSuccessDark);
		.define-color(dark-mode-danger, @websomDangerDark);
		.define-color(dark-mode-warning, @websomWarningDark);
		.define-color(dark-mode-info, @websomInfoDark);
	}

	.define-color(@name, @value) {
		.define-color(@name, @value, contrast(@value, @set-contrast-dark, @set-contrast-light), rgb(127, 127, 127));
	}

	.define-color(@name, @value, @contrast, @background-color) {
		--@{name}: @value;
		--@{name}-dark: darken(@value, @color-movement);
		--@{name}-light: lighten(@value, @color-movement);

		@contrasted: @contrast;
		--@{name}-contrast: @contrasted;
		--@{name}-contrast-blend: mix(@value, @contrasted);

		--@{name}-contrast-light: lighten(@contrasted, @color-movement);
		--@{name}-contrast-dark: darken(@contrasted, @color-movement);

		--@{name}-overlay: overlay(@value, @background-color);

		.@{name} {
			--color: var(~"--@{name}");
			--color-light: var(~"--@{name}-light");
			--color-dark: var(~"--@{name}-dark");
			--contrast: var(~"--@{name}-contrast");
			--contrast-light: var(~"--@{name}-contrast-light");
			--contrast-dark: var(~"--@{name}-contrast-dark");
		}
	}

	.set-vars(@name, @toName) {
		--color: var(~"--@{toName}");
		--color-light: var(~"--@{toName}-light");
		--color-dark: var(~"--@{toName}-dark");
		--contrast: var(~"--@{toName}-contrast");
		--contrast-light: var(~"--@{toName}-contrast-light");
		--contrast-dark: var(~"--@{toName}-contrast-dark");
	}

	.set-color(@name, @toName) {
		--@{name}: var(~"--@{toName}");
		--@{name}-contrast: var(~"--@{toName}-contrast");
		--@{name}-contrast-blend: var(~"--@{toName}-contrast-blend");
		--@{name}-light: var(~"--@{toName}-light");
		--@{name}-dark: var(~"--@{toName}-dark");

		--@{name}-overlay: var(~"--@{toName}-overlay");

		--@{name}-contrast-light: var(~"--@{toName}-contrast-light");
		--@{name}-contrast-dark: var(~"--@{toName}-contrast-dark");

		.@{name} {
			.set-vars(@name, @toName);
		}

		.color-@{name} {
			color: var(~"--@{name}");
		}
	}

	.large {
		--base-size: 20px;
	}

	.medium {
		--base-size: 16px;
	}

	.small {
		--base-size: 12px;
	}

	.tiny {
		--base-size: 8px;
		--icon-size: 16px;
	}

	.transparent {
		--color: transparent;
		--color-dark: rgba(0, 0, 0, 0.1);
		--color-light: rgba(255, 255, 255, 0.1);
	}

	.pure-transparent {
		--color: transparent;
		--color-dark: transparent;
		--color-light: transparent;
	}

	.background-transparent {
		--background: transparent;
		--background-tint: transparent;
		--background-overlay: transparent;
	}

	/*.primary {
		--color: var(--primary);
		--color-light: var(--primary-light);
		--color-dark: var(--primary-dark);

		--contrast: var(--contrast-primary);
		--contrast-light: var(--contrast-primary-light);
		--contrast-dark: var(--contrast-primary-dark);
	}

	.secondary {
		--color: var(--secondary);
		--color-light: var(--secondary-light);
		--color-dark: var(--secondary-dark);

		--contrast: var(--contrast-secondary);
		--contrast-light: var(--contrast-secondary-light);
		--contrast-dark: var(--contrast-secondary-dark);
	}

	.tertiary {
		--color: var(--tertiary);
		--color-light: var(--tertiary-light);
		--color-dark: var(--tertiary-dark);

		--contrast: var(--contrast-tertiary);
		--contrast-light: var(--contrast-tertiary-light);
		--contrast-dark: var(--contrast-tertiary-dark);
	}*/

	body {
		background-color: var(--background);
		color: var(--background-contrast);
	}

	.dark {
		--background: var(--dark-background);
		--background-contrast: var(--dark-background-contrast);
		--background-overlay: var(--dark-background-overlay);
		--background-overlay-contrast: var(--dark-background-contrast);
		--background-tint: var(--dark-background-tint);
		--background-tint-contrast: var(--dark-background-contrast);
		--background-center: var(--dark-background-center);
		--background-center-contrast: var(--dark-background-contrast);
		--background-diff: var(--dark-background-diff);
		--background-diff-contrast: var(--dark-background-contrast);

		.set-vars(primary, dark-mode-primary);

		.set-color(primary, dark-mode-primary);
		.set-color(secondary, dark-mode-secondary);
		.set-color(tertiary, dark-mode-tertiary);
		.set-color(success, dark-mode-success);
		.set-color(danger, dark-mode-danger);
		.set-color(warning, dark-mode-warning);
		.set-color(info, dark-mode-info);

		.set-color(mute, dark-mode-mute);
		.set-color(disabled, dark-mode-disabled);

		/*--secondary: var(--dark-mode-secondary);
			--contrast-secondary: var(--dark-mode-contrast-secondary);
			--secondary-light: var(--dark-mode-secondary-light);
				--contrast-secondary-light: var(--dark-mode-contrast-secondary-light);
			--secondary-dark: var(--dark-mode-secondary-dark);
				--contrast-secondary-dark: var(--dark-mode-contrast-secondary-dark);*/
	}

	.light {
		--background: var(--light-background);
		--background-contrast: var(--light-background-contrast);
		--background-overlay: var(--light-background-overlay);
		--background-overlay-contrast: var(--light-background-contrast);
		--background-tint: var(--light-background-tint);
		--background-tint-contrast: var(--light-background-contrast);
		--background-center: var(--light-background-center);
		--background-center-contrast: var(--light-background-contrast);
		--background-diff: var(--light-background-diff);
		--background-diff-contrast: var(--light-background-contrast);

		.set-vars(primary, light-mode-primary);

		.set-color(primary, light-mode-primary);
		.set-color(secondary, light-mode-secondary);
		.set-color(tertiary, light-mode-tertiary);
		.set-color(success, light-mode-success);
		.set-color(danger, light-mode-danger);
		.set-color(warning, light-mode-warning);
		.set-color(info, light-mode-info);

		.set-color(mute, light-mode-mute);
		.set-color(disabled, light-mode-disabled);
	}

	@media (prefers-color-scheme: dark) {
		body {
			.dark();
		}
	}

	@media (prefers-color-scheme: light) {
		body {
			.light();
		}
	}

	.websom-main-wrap {
		transition: var(--transition) var(--transition-easing);
		transform: var(--slide-out-shift);
	}

	.websom-shade {
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;

		z-index: var(--z-below-modal);

		background: rgba(0, 0, 0, 0.6);

		transition: var(--transition) var(--transition-easing);

		opacity: 0;

		pointer-events: none;

		&.websom-shaded {
			opacity: 1;

			pointer-events: all;
		}
	}

	.websom-main-wrap.websom-shaded {
		transition: var(--transition) var(--transition-easing);

		filter: blur(16px);
	}

	.disabled {
		pointer-events: none;
		cursor: normal;
	}

	.flex-space-between {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}