@import "variables";

/**
 * Design System Color mixins
 */

/* Background color and text color */

._createDSColorModifiers(@name: ComponentName, @withAction: false, @withWeight: false, @withBorder: false, @withSplit: false) {
	//legacy modifiers
	&.@{name}--primary { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @primaryColor); }
	&.@{name}--secondary { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @secondaryColor); }
	&.@{name}--tertiary { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @tertiaryColor); }
	&.@{name}--success { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @successColor); }
	&.@{name}--danger { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @dangerColor); }

	//new modifiers
	&.@{name}--info { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @infoSemanticColor); }
	&.@{name}--positive { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @positiveSemanticColor); }
	&.@{name}--warning { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @warningSemanticColor, @primaryNeutralColor); }
	&.@{name}--negative { 
		._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @negativeSemanticColor, @primaryNeutralColor); 
	
		&.@{name}--normal {
			font-weight: bold;
		}
	}

	&.@{name}--neutral { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @neutralSemanticColor); }

	&.@{name}--primaryBrand { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @primaryBrandColor); }
	&.@{name}--secondaryBrand { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @secondaryBrandColor); }
	&.@{name}--tertiaryBrand { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @tertiaryBrandColor, @primaryNeutralColor, @primaryNeutralColor, @primaryNeutralColor, @primaryNeutralColor); }

	&.@{name}--primaryAction { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @primaryActionColor); }
	&.@{name}--brandAction { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @brandActionColor); }
	&.@{name}--secondaryAction { ._createDSColorModifier(@name, @withSplit, @withBorder, @withWeight, @withAction, @secondaryActionColor); }
}

._createDSColorModifier(
	@name, 
	@withSplit,
	@withBorder, 
	@withWeight, 
	@withAction,
	@color, 
	@textColor: @primaryNeutralColor--light, 
	@xlightTextColor: @primaryNeutralColor,
	@lightTextColor: @primaryNeutralColor,
	@boldTextColor: @primaryNeutralColor--light,
) {
	background-color: @color;
	color: @textColor;

	& when (@withBorder = true) {
		border-color: @color;
	}

	& when (@withAction = true) {
		&:hover {
			background-color: lighten(@color, 12%);
		}

		&:active {
			background-color: darken(@color, 12%);
		}

		&:focus {
			.focus(@color);
		}

		&.is-disabled {
			opacity: 0.42;
		}
	} 

	& when (@withWeight = true) {
		&.@{name}--xlight {
			background-color: lighten(@color, 30%);
			color: @xlightTextColor;
		}

		&.@{name}--light {
			background-color: lighten(@color, 20%);
			color: @lightTextColor;
		}

		&.@{name}--dark {
			background-color: darken(@color, 25%);
			color: @boldTextColor;

			& when (@withBorder = true) {
				border-color: darken(@color, 25%);
			}
		}
	}

	& when (@withSplit = true) {
		&.@{name}--split {	
			._createSplitColorModifier(@color);
		}
	}	
}

._createSplitColorModifier(@color) {
	.ui-split-colors(@color, darken(@color, 15%));
}

 /* Specific prop */

 ._createDSColorPropModifiers(@name: ComponentName, @prop: border-color, @withAction: false, @withWeight: false, @withBorder: false) {
	//legacy modifiers
	&.@{name}--primary { ._createDSColorPropModifier(@name, @prop, @primaryColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--secondary { ._createDSColorPropModifier(@name, @prop, @secondaryColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--tertiary { ._createDSColorPropModifier(@name, @prop, @tertiaryColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--success { ._createDSColorPropModifier(@name, @prop, @successColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--danger { ._createDSColorPropModifier(@name, @prop, @dangerColor, @withWeight, @withBorder, @withAction); }

	//new modifiers
	&.@{name}--info { ._createDSColorPropModifier(@name, @prop, @infoSemanticColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--positive { ._createDSColorPropModifier(@name, @prop, @positiveSemanticColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--warning { ._createDSColorPropModifier(@name, @prop, @warningSemanticColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--negative { ._createDSColorPropModifier(@name, @prop, @negativeSemanticColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--neutral { ._createDSColorPropModifier(@name, @prop, @neutralSemanticColor, @withWeight, @withBorder, @withAction); }

	&.@{name}--primaryAction { ._createDSColorPropModifier(@name, @prop, @primaryActionColor, @withWeight, @withBorder, @withAction, 50%); }
	&.@{name}--brandAction { ._createDSColorPropModifier(@name, @prop, @brandActionColor, @withWeight, @withBorder, @withAction, 35%); }
	&.@{name}--secondaryAction { ._createDSColorPropModifier(@name, @prop, @secondaryActionColor, @withWeight, @withBorder, @withAction, 20%); }

	&.@{name}--primaryBrand { ._createDSColorPropModifier(@name, @prop, @primaryBrandColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--secondaryBrand { ._createDSColorPropModifier(@name, @prop, @secondaryBrandColor, @withWeight, @withBorder, @withAction); }
	&.@{name}--tertiaryBrand { ._createDSColorPropModifier(@name, @prop, @tertiaryBrandColor, @withWeight, @withBorder, @withAction); }
}

._createDSColorPropModifier( @name, @prop, @color, @withWeight: false, @withBorder: false, @withAction: false, @interactionShade: 30%) {
	@{prop}: @color;

	& when (@withBorder = true) {
		border-color: @color;
	}

	& when (@withWeight = true) {
		&.@{name}--xlight {
			@{prop}: lighten(@color, 30%);

			& when (@withBorder = true) {
				border-color: lighten(@color, 30%);
			}
		}

		&.@{name}--light {
			@{prop}: lighten(@color, 20%);

			& when (@withBorder = true) {
				border-color: lighten(@color, 20%);
			}
		}

		&.@{name}--dark {
			@{prop}: darken(@color, 25%);

			& when (@withBorder = true) {
				border-color: darken(@color, 25%);
			}
		}
	}

	& when (@withAction = true) {
		&:hover {
			background-color: lighten(@color, @interactionShade);
		}

		&:active {
			background-color: lighten(@color, @interactionShade - 10%);
		}

		&:focus {
			.focus(@color);
		}

		&.is-disabled {
			opacity: 0.42;
		}
	} 
}