// Fylgja (https://fylgja.dev)
// Licensed under MIT Open Source

@use "props" as *;

$use-mq: true !default;

:where(.flex, .flex-col, .flex-wrap) {
	--flex-dir: row;
	--flex-wrap: nowrap;
	--_flexD: var(--flex-dir);
	--_flexW: var(--flex-wrap);
	flex-flow: var(--_flexD) var(--_flexW);
}

:where(:is(.flex-col, .flex-wrap):not(dialog, [popover])) {
	display: flex;
}

.flex-col {
	--flex-dir: column;
}

.flex-wrap {
	--flex-wrap: wrap;
}

.flex-none {
	flex: none;
}

.flex-auto {
	flex: auto;
}

@mixin mq-utils($name) {
	:is(.flex, .flex-col, .flex-wrap) {
		&:where([style*="--#{$name}_flex-dir:"]) {
			--_flexD: var(--#{$name}_flex-dir);
		}

		&:where([style*="--#{$name}_flex-wrap:"]) {
			--_flexW: var(--#{$name}_flex-wrap);
		}
	}
}

@if $use-mq {
	@include for-mq using ($name) {
		@include mq-utils($name);
	}
}