<commit_before>/*
Unitize mixin
================================================
The unitize mixins converts values from px-units to the relative rem-units, providing all the benefits of units like em and rem, without you having to do any calculations yourself.

######Syntax:
`@property` = the property that should be unitized.<br/>
`@value` = pixel-value<br/>
`@baseValue` (optional) = default browser font-size (@remScaleFactor in most cases)<br/>

######Example Unitize mixin with custom property
`.unitize(@property, @value);`<br/>
`.unitize(font-size, 16);`

######Specific built-in functions
In addition to the general `.unitize()` mixin, Shopware contains specific mixins to quickly calculate values which (for example) have more than one property.<br/>
<br/>

`.unitize-height(@value)`<br/>
`.unitize-width(@value)`<br/>
`.unitize-max-height(@value)`<br/>
`.unitize-max-width(@value)`<br/>
`.unitize-min-width(@value)`<br/>
`.unitize-padding(@topValue, @rightValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-margin(@topValue, @rightValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-variable(@value)`<br/>
*/

	// @deprecated unitize mixin which should be called like ```.unitize(200, @remScaleFactor, height);```
.unitize(@value, @baseValue: @remScaleFactor, @property: font-size) when (isnumber(@value)) and(isnumber(@baseValue)) and (iskeyword(@property)) {
	@pxValue: @value;
	@remValue: (@value / @baseValue);
	@{property}: ~"@{pxValue}px";
	@{property}: ~"@{remValue}rem";
}
	// New default unitize mixin which should be called like ```.unitize(height, 200);```
.unitize(@property, @value, @baseValue: @remScaleFactor) when (iskeyword(@property)) and (isnumber(@value)) and (isnumber(@baseValue)) {
	@pxValue: @value;
	@remValue: (@value / @baseValue);
	@{property}: ~"@{pxValue}px";
	@{property}: ~"@{remValue}rem";
}

.unitize-multiple(@topValue, @rightValue, @bottomValue: @topValue, @leftValue: @rightValue, @baseValue: @remScaleFactor, @property: padding) {
	@pxTopValue: @topValue;
	@emTopValue: (@topValue / @baseValue);

	@pxRightValue: @rightValue;
	@emRightValue: (@rightValue / @baseValue);

	@pxBottomValue: @bottomValue;
	@emBottomValue: (@bottomValue / @baseValue);

	@pxLeftValue: @leftValue;
	@emLeftValue: (@leftValue / @baseValue);

	@{property}: ~"@{pxTopValue}px @{pxRightValue}px @{pxBottomValue}px @{pxLeftValue}px";
	@{property}: ~"@{emTopValue}rem @{emRightValue}rem @{emBottomValue}rem @{emLeftValue}rem";
}

.unitize-height(@value, @baseValue: @remScaleFactor) {
	.unitize(height, @value, @baseValue);
}

.unitize-width(@value, @baseValue: @remScaleFactor) {
	.unitize(width, @value, @baseValue);
}

.unitize-max-height(@value, @baseValue: @remScaleFactor) {
	.unitize(max-height, @value, @baseValue);
}

.unitize-min-height(@value, @baseValue: @remScaleFactor) {
	.unitize(min-height, @value, @baseValue);
}

.unitize-max-width(@value, @baseValue: @remScaleFactor) {
	.unitize(max-width, @value, @baseValue);
}

.unitize-min-width(@value, @baseValue: @remScaleFactor) {
    .unitize(min-width, @value, @baseValue);
}

.unitize-margin(@topValue, @rightValue, @bottomValue: @topValue, @leftValue: @rightValue, @baseValue: @remScaleFactor) {
	.unitize-multiple(@topValue, @rightValue, @bottomValue, @leftValue, @baseValue, margin);
}

.unitize-padding(@topValue, @rightValue, @bottomValue: @topValue, @leftValue: @rightValue, @baseValue: @remScaleFactor) {
	.unitize-multiple(@topValue, @rightValue, @bottomValue, @leftValue, @baseValue, padding);
}

.unitize-variable(@value, @baseValue: @remScaleFactor) {
	@emValue: (@value / @baseValue);
}<commit_msg>SW-19754 - Unitize behave like CSS properties<commit_after>/*
Unitize mixin
================================================
The unitize mixins converts values from px-units to the relative rem-units, providing all the benefits of units like em and rem, without you having to do any calculations yourself.

######Syntax:
`@property` = the property that should be unitized.<br/>
`@value` = pixel-value<br/>
`@baseValue` (optional) = default browser font-size (@remScaleFactor in most cases)<br/>

######Example Unitize mixin with custom property
`.unitize(@property, @value);`<br/>
`.unitize(font-size, 16);`

######Specific built-in functions
In addition to the general `.unitize()` mixin, Shopware contains specific mixins to quickly calculate values which (for example) have more than one property.<br/>
<br/>

`.unitize-height(@value)`<br/>
`.unitize-width(@value)`<br/>
`.unitize-max-height(@value)`<br/>
`.unitize-max-width(@value)`<br/>
`.unitize-min-width(@value)`<br/>
`.unitize-padding(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-margin(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-variable(@value)`<br/>
*/

	// @deprecated unitize mixin which should be called like ```.unitize(200, @remScaleFactor, height);```
.unitize(@value, @baseValue: @remScaleFactor, @property: font-size) when (isnumber(@value)) and(isnumber(@baseValue)) and (iskeyword(@property)) {
	@pxValue: @value;
	@remValue: (@value / @baseValue);
	@{property}: ~"@{pxValue}px";
	@{property}: ~"@{remValue}rem";
}
	// New default unitize mixin which should be called like ```.unitize(height, 200);```
.unitize(@property, @value, @baseValue: @remScaleFactor) when (iskeyword(@property)) and (isnumber(@value)) and (isnumber(@baseValue)) {
	@pxValue: @value;
	@remValue: (@value / @baseValue);
	@{property}: ~"@{pxValue}px";
	@{property}: ~"@{remValue}rem";
}

.unitize-multiple(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue, @baseValue: @remScaleFactor, @property: padding) {
	@pxTopValue: @topValue;
	@emTopValue: (@topValue / @baseValue);

	@pxRightValue: @rightValue;
	@emRightValue: (@rightValue / @baseValue);

	@pxBottomValue: @bottomValue;
	@emBottomValue: (@bottomValue / @baseValue);

	@pxLeftValue: @leftValue;
	@emLeftValue: (@leftValue / @baseValue);

	@{property}: ~"@{pxTopValue}px @{pxRightValue}px @{pxBottomValue}px @{pxLeftValue}px";
	@{property}: ~"@{emTopValue}rem @{emRightValue}rem @{emBottomValue}rem @{emLeftValue}rem";
}

.unitize-height(@value, @baseValue: @remScaleFactor) {
	.unitize(height, @value, @baseValue);
}

.unitize-width(@value, @baseValue: @remScaleFactor) {
	.unitize(width, @value, @baseValue);
}

.unitize-max-height(@value, @baseValue: @remScaleFactor) {
	.unitize(max-height, @value, @baseValue);
}

.unitize-min-height(@value, @baseValue: @remScaleFactor) {
	.unitize(min-height, @value, @baseValue);
}

.unitize-max-width(@value, @baseValue: @remScaleFactor) {
	.unitize(max-width, @value, @baseValue);
}

.unitize-min-width(@value, @baseValue: @remScaleFactor) {
    .unitize(min-width, @value, @baseValue);
}

.unitize-margin(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue, @baseValue: @remScaleFactor) {
	.unitize-multiple(@topValue, @rightValue, @bottomValue, @leftValue, @baseValue, margin);
}

.unitize-padding(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue, @baseValue: @remScaleFactor) {
	.unitize-multiple(@topValue, @rightValue, @bottomValue, @leftValue, @baseValue, padding);
}

.unitize-variable(@value, @baseValue: @remScaleFactor) {
	@emValue: (@value / @baseValue);
}
{'fraction_non_alphanumeric': 0.19845255870775078, 'fraction_numerical': 0.002850549748880141, 'mean_word_length': 6.805084745762712, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1890880', 'n_tokens_mistral': 2548, 'n_tokens_neox': 2505, 'n_words': 562}