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

@use "props" as *;

$use-mq: true !default;
$utils: (
	"size-y": "block-size",
	"size-x": "inline-size",
	"my": "margin-block",
	"mx": "margin-inline",
	"py": "padding-block",
	"px": "padding-inline",
) !default;

:where([style*="--size:"]) {
	block-size: var(--size);
	inline-size: var(--size);
}

:where([style*="--m:"]) {
	margin: var(--m);
}

:where([style*="--p:"]) {
	padding: var(--p);
}

@each $var, $prop in $utils {
	:where([style*="--#{$var}:"]) {
		#{$prop}: var(--#{$var});
	}
}

@mixin mq-utils($name) {
	@each $var, $prop in $utils {
		:where([style*="--#{$name}_#{$var}:"]) {
			#{$prop}: var(--#{$name}_#{$var});
		}
	}
}

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