<commit_before>/*-----------------------------------------------------------------

Modular
Made by @esr360
http://github.com/esr360/Modular/
	
-----------------------------------------------------------------*/

//-----------------------------------------------------------------
// Mixins
//-----------------------------------------------------------------

//	1. component()
//	2. sub-component()
// 	3. overwrite()
//	4. overwrite-sub()
//	5. modifier()
//	6. nested-modifier()
//	7. extend-modifiers()
//	8. setting()
// 	9. option()

//-----------------------------------------------------------------

// 1. Component
// Define the main component
//-----------------------------------------------------------------

// 	Usage
// 
// 	@include component(header) {
//		...
// 	}
//
// 	<div class="header">...</div>

// Set the default selector type (flex, chain, static)
$type: flex;

@mixin component($component, $type: map-get($config, selector-type)) {
	$component: $component !global;
	@if $type == flex {
		.#{$component},
		[class*="#{$component}-"] {
			@content;
		}	
	} @else if $type == chain {
		[class*="#{$component}-"] {
			@content;
		}
	} @else if $type == static {
		.#{$component} {
			@content;
		}
	}
}

// 2. Sub-Component
// Create a sub-component based off the main component
//-----------------------------------------------------------------

// 	Usage
//
//	@include component(header) {
//		@include sub-component(wrapper) {
//			...
//		}
//	}
//
//	<div class="header_wrapper">...</div>

@mixin sub-component($sub-component, $type: $type) {
	@at-root {
		@if $type == flex {
			.#{$component}_#{$sub-component},
			[class*="#{$component}_#{$sub-component}-"] {
				@content;
			}
		} @else if $type == chain {
			[class*="#{$component}_#{$sub-component}-"] {
				@content;
			}
		} @else if $type == static {
			.#{$component}_#{$sub-component} {
				@content;
			}
		}
	}
}

// 3. Overwrite
// Overwrite a component in alternate context
//-----------------------------------------------------------------

// 	Usage
// 
// 	@include component(header) {
//		@include overwrite(logo) {
//			...
//		}
// 	}
//
// 	<div class="header">
//		<div class="logo">...</div>
//	</div>

@mixin overwrite($component, $type: $type) {
	@if $type == flex {
		.#{$component},
		[class*="#{$component}-"] {
			@content;
		}	
	} @else if $type == chain {
		[class*="#{$component}-"] {
			@content;
		}
	} @else if $type == static {
		.#{$component} {
			@content;
		}
	}
}

// 4. Overwrite-Sub
// Overwrite a sub-component in alternate context
//-----------------------------------------------------------------

// 	Usage
// 
// 	@include component(form) {
//
//		@include sub-component(input) {
//			...
//		}
//
//		@include modifier(html5) {
//			@include overwrite-sub(input) {
//				...
//			}
//		}
//
// 	}
//
// 	<div class="form-html5">
//		<input class="form_input" type="text" />
//	</div>

@mixin overwrite-sub($sub-component, $type: $type) {
	@if $type == flex {
		.#{$component}_#{$sub-component},
		[class*="#{$component}_#{$sub-component}-"] {
			@content;
		}	
	} @else if $type == chain {
		[class*="#{$component}_#{$sub-component}-"] {
			@content;
		}
	} @else if $type == static {
		.#{$component}_#{$sub-component} {
			@content;
		}
	}
}

// 5. Modifiers 
// Add a modifier to an existing component
//-----------------------------------------------------------------

//	Usage
//
//	@include component(button) {
//		@include modifier(large) {
//			...
//		}
//	}
//
//	<div class="button-large">...</div>

@mixin modifier($modifier) {
	$selectors: &;
	@if map-get($config, selector-type) == flex {
		$selectors: ();
		$i: 1;
		@each $item in & {
		    $i: $i + 1;
		    @if $i == 2 {<commit_msg>adding ability to accept multiple components per mixin<commit_after>/*-----------------------------------------------------------------

Modular
Made by @esr360
http://github.com/esr360/Modular/
	
-----------------------------------------------------------------*/

//-----------------------------------------------------------------
// Mixins
//-----------------------------------------------------------------

//	1. component()
//	2. sub-component()
// 	3. overwrite()
//	4. overwrite-sub()
//	5. modifier()
//	6. nested-modifier()
//	7. extend-modifiers()
//	8. setting()
// 	9. option()

//-----------------------------------------------------------------

// 1. Component
// Define the main component
//-----------------------------------------------------------------

// 	Usage
// 
// 	@include component(header) {
//		...
// 	}
//
// 	<div class="header">...</div>

// Set the default selector type (flex, chain, static)
$type: flex;

@mixin component($components, $type: map-get($config, selector-type)) {
	$component: $components !global;
	$selectors: ();
	@each $component in $components {
		@if $type == flex {
			$selectors: join($selectors, '.#{$component}');
			$selectors: join($selectors, '[class*="#{$component}-"]');
		} @else if $type == chain {
			$selectors: join($selectors, '[class*="#{$component}-"]');
		} @else if $type == static {
			$selectors: join($selectors, '.#{$component}');
		}
	}
	$selectors: to-string($selectors, ", ");
	#{$selectors} {
		@content;
	}
}

// Alias for multiple components
@mixin components($components, $type: $type) {
	@include component($components, $type) {
		@content;
	}
}

// 2. Sub-Component
// Create a sub-component based off the main component
//-----------------------------------------------------------------

// 	Usage
//
//	@include component(header) {
//		@include sub-component(wrapper) {
//			...
//		}
//	}
//
//	<div class="header_wrapper">...</div>

@mixin sub-component($sub-components, $type: $type) {
	$selectors: ();
	@each $sub-component in $sub-components {
		@if $type == flex {
			$selectors: join($selectors, '.#{$component}_#{$sub-component}');
			$selectors: join($selectors, '[class*="#{$component}_#{$sub-component}-"]');
		} @else if $type == chain {
			$selectors: join($selectors, '[class*="#{$component}_#{$sub-component}-"]');
		} @else if $type == static {
			$selectors: join($selectors, '.#{$component}_#{$sub-component}');
		}
	}
	$selectors: to-string($selectors, ", ");
	@at-root {
		#{$selectors} {
			@content;
		}
	}	
}

// Alias for multiple components
@mixin sub-components($sub-components, $type: $type) {
	@include sub-component($sub-components, $type) {
		@content;
	}
}

// 3. Overwrite
// Overwrite a component in alternate context
//-----------------------------------------------------------------

// 	Usage
// 
// 	@include component(header) {
//		@include overwrite(logo) {
//			...
//		}
// 	}
//
// 	<div class="header">
//		<div class="logo">...</div>
//	</div>

@mixin overwrite($components, $type: $type) {
	$selectors: ();
	@each $component in $components {
		@if $type == flex {
			$selectors: join($selectors, '.#{$component}');
			$selectors: join($selectors, '[class*="#{$component}-"]');
		} @else if $type == chain {
			$selectors: join($selectors, '[class*="#{$component}-"]');
		} @else if $type == static {
			$selectors: join($selectors, '.#{$component}');
		}
	}
	$selectors: to-string($selectors, ", ");
	#{$selectors} {
		@content;
	}
}

// 4. Overwrite-Sub
// Overwrite a sub-component in alternate context
//-----------------------------------------------------------------

// 	Usage
// 
// 	@include component(form) {
//
//		@include sub-component(input) {
//			...
//		}
//
//		@include modifier(html5) {
//			@include overwrite-sub(input) {
//				...
//			}
//		}
//
// 	}
//
// 	<div class="form-html5">
//		<input class="form_input" type="text" />
//	</div>

@mixin overwrite-sub($sub-components, $type: $type) {
	$selectors: ();
	@each $sub-component in $sub-components {
		@if $type == flex {
			$selectors: join($selectors, '.#{$component}_#{$sub-component}');
			$selectors: join($selectors, '[class*="#{$component}_#{$sub-component}-"]');
		} @else if $type == chain {
			$selectors: join($selectors, '[class*="#{$component}_#{$sub-component}-"]');
		} @else if $type == static {
			$selectors: join($selectors, '.#{$component}_#{$sub-component}');
		}
	}
	$selectors: to-string($selectors, ", ");
	#{$selectors} {
		@content;
	}
}

// 5. Modifiers 
// Add a modifier to an existing component
//-----------------------------------------------------------------

//	Usage
//
//	@include component(button) {
//		@include modifier(large) {
//			...
//		}
//	}
//
//	<div class="button-large">...</div>

@mixin modifier($modifier) {
	$selectors: &;
	@if map-get($config, selector-type) == flex {
		$selectors: ();
		$i: 1;
		@each $item in & {
		    $i: $i + 1;
		    @if $i == 2 {
{'fraction_non_alphanumeric': 0.3574644960166263, 'fraction_numerical': 0.005773005426625101, 'mean_word_length': 1.6660510926438905, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '4757515', 'n_tokens_mistral': 3052, 'n_tokens_neox': 2820, 'n_words': 551}