@use '../../abstracts/variables/sizing/variables' as *;
@use '../../abstracts/variables/color/variables' as *;
@use '../../abstracts/variables/effects/variables' as *;
@use '../../abstracts/variables/tables/variables' as *;
@use '../../abstracts/variables/flex-grid/variables' as *;
@use '../../abstracts/variables/layout/variables' as *;
@use '../../abstracts/variables/interactivity/variables' as *;
@use '../../abstracts/variables/animation/variables' as *;
@use '../../abstracts/variables/background/variables' as *;
@use '../../abstracts/variables/transforms/variables' as *;
@use '../../abstracts/variables/borders/variables' as *;
@use '../../abstracts/variables/svg/variables' as *;

@use '../../abstracts/mixins/typography/mixin' as *;
@use '../../abstracts/mixins/reusable/omen-mixin.scss' as *;
@use '../../abstracts/mixins/color/mixin' as *;
@use '../../abstracts/mixins/animations/mixin' as *;
@use '../../abstracts/mixins/effects/mixin' as *;
@use '../../abstracts/mixins/filters/mixin' as *;
@use '../../abstracts/mixins/borders/mixin' as *;

// typography
@include typobasis();
@include universalMixin(true, true, true, text-, font-size, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, text-, font-size, px, 11, 30, 10, 1px);
@include universalMixin(true, true, true, rel-text-, font-size, vw, 0, 100, 1, 1vw);
@include universalMixin(true, true, true, font-, font-weight, '', 1, 9, 100, 1);
@include universalMixin(true, true, true, line-height-, line-height, per, 0, 300, 1, 1%);
@include universalMixin(true, true, true, line-height-, line-height, '', 0, 100, 1, 1);
@include universalMixin(true, true, true, letter-spacing-, letter-spacing, px, -30, 30, 1, 1px);
@include universalMixin(true, true, true, text-decoration-thickness-, text-decoration-thickness, px, -30, 30, 1, 1px);
@include universalMixin(true, true, true, text-underline-, text-underline-offset, px, -30, 30, 1, 1px);
@include universalMixin(true, true, true, text-indent-, text-indent, rem, 0, 30, 1, 1rem);
@include lineClampMixin('');
// flex
@include eachValues('', $utilities);
@include universalMixin(true, true, true, gap-, gap, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, gap-x-, column-gap, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, gap-y-, row-gap, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, gap-, gap, rem, 11, 30, 1, 1rem);
@include universalMixin(true, true, true, gap-x-, column-gap, rem, 11, 30, 1, 1rem);
@include universalMixin(true, true, true, gap-y-, row-gap, rem, 11, 30, 1, 1rem);
@include universalMixin(true, true, true, basis-, flex-basis, per, 0, 100, 1, 1%);
// color
@include initialColor(text-, color);
@include initialColor(bg-, background-color);
@include lightColor(text-, 1, 10, color, $colors);
@include lightColor(bg-, 1, 10, background-color, $colors);
@include lightColor(text-, 0, 0, color, $lightdark);
@include lightColor(bg-, 0, 0, background-color, $lightdark);
@include initialColor(accent-, accent-color);
@include lightColor(accent-, 1, 10, accent-color, $colors);
@include lightColor(accent-, 0, 0, accent-color, $lightdark);
@include bggradient();
@include bggradient('', $lightdark);
@include bgGradientToFrom();
@include initialColor(text-decoration-, text-decoration-color);
@include lightColor(text-decoration-, 1, 10, text-decoration-color, $colors);
@include lightColor(text-decoration-, 0, 0, text-decoration-color, $lightdark);
// active and focus color classes
@include initialColor(text-decoration-, text-decoration-color, active);
@include initialColor(text-decoration-, text-decoration-color, focus);
@include lightColor(text-decoration-, 1, 10, text-decoration-color, $colors, active);
@include lightColor(text-decoration-, 1, 10, text-decoration-color, $colors, focus);
@include initialColor(text-, color, active);
@include initialColor(text-, color, focus);
@include initialColor(bg-, background-color, active);
@include initialColor(bg-, background-color, focus);
@include lightColor(text-, 1, 10, color, $colors, active);
@include lightColor(text-, 1, 10, color, $colors, focus);
@include lightColor(bg-, 1, 10, background-color, $colors, active);
@include lightColor(bg-, 1, 10, background-color, $colors, focus);
@include lightColor(text-, 0, 0, color, $lightdark, active);
@include lightColor(text-, 0, 0, color, $lightdark, focus);
@include lightColor(bg-, 0, 0, background-color, $lightdark, active);
@include lightColor(bg-, 0, 0, background-color, $lightdark, focus);
@include lightColor(accent-, 1, 10, accent-color, $colors, active);
@include lightColor(accent-, 1, 10, accent-color, $colors, focus);
@include lightColor(accent-, 0, 0, accent-color, $lightdark, active);
@include lightColor(accent-, 0, 0, accent-color, $lightdark, focus);
@include initialColor(accent-, accent-color, active);
@include initialColor(accent-, accent-color, focus);
// custom colors
@include customColor('', text-, color);
@include customColor('', bg-, background-color);
@include customColor('', border-, border-color);
@include customColor('', fill-, fill);
@include customColor('', accent-, accent-color);
@include customColor('', text-decoration-, text-decoration-color);
// layout
@include eachValues('', $layoutVariables);
@include universalMixin(true, true, true, col-, columns, '', 1, 12, 1, 1);
@include universalMixin(true, true, true, col-, columns, rem, 1, 100, 1, 1rem);
@include universalMixin(true, true, true, top-, top, per, -100, 100, 1, 1%);
@include universalMixin(true, true, true, right-, right, per, -100, 100, 1, 1%);
@include universalMixin(true, true, true, bottom-, bottom, per, -100, 100, 1, 1%);
@include universalMixin(true, true, true, left-, left, per, -100, 100, 1, 1%);
@include universalMixin(true, true, true, z-, z-index, '', -100, 100, 1, 1);
// sizing - width
@include eachValues('', $sizingValues);
@include universalMixin(true, true, true, w-, width, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, w-, width, rem, 11, 100, 1, 1rem);
@include universalMixin(true, true, true, w-, width, per, 0, 100, 1, 1%);
@include universalMixin(true, true, true, w-, width, vw, 0, 100, 1, 1vw);
@include universalMixin(true, true, true, max-w-, max-width, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, max-w-, max-width, rem, 11, 100, 1, 1rem);
@include universalMixin(true, true, true, max-w-, max-width, per, 0, 100, 1, 1%);
@include universalMixin(true, true, true, max-w-, max-width, vw, 0, 100, 1, 1vw);
@include universalMixin(true, true, true, min-w-, min-width, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, min-w-, min-width, rem, 11, 100, 1, 1rem);
@include universalMixin(true, true, true, min-w-, min-width, per, 0, 100, 1, 1%);
@include universalMixin(true, true, true, min-w-, min-width, vw, 0, 100, 1, 1vw);
// sizing - height
@include universalMixin(true, true, true, h-, height, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, h-, height, rem, 11, 100, 1, 1rem);
@include universalMixin(true, true, true, h-, height, per, 0, 100, 1, 1%);
@include universalMixin(true, true, true, h-, height, vh, 0, 100, 1, 1vh);
@include universalMixin(true, true, true, max-h-, max-height, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, max-h-, max-height, rem, 11, 100, 1, 1rem);
@include universalMixin(true, true, true, max-h-, max-height, per, 0, 100, 1, 1%);
@include universalMixin(true, true, true, max-h-, max-height, vh, 0, 100, 1, 1vh);
@include universalMixin(true, true, true, min-h-, min-height, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, min-h-, min-height, rem, 11, 100, 1, 1rem);
@include universalMixin(true, true, true, min-h-, min-height, per, 0, 100, 1, 1%);
@include universalMixin(true, true, true, min-h-, min-height, vh, 0, 100, 1, 1vh);
// spacing - padding
@include universalMixin(true, true, true, p-, padding, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, pt-, padding-top, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, pr-, padding-right, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, pb-, padding-bottom, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, pl-, padding-left, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, px-, padding-inline, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, py-, padding-block, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, p-, padding, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, pt-, padding-top, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, pr-, padding-right, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, pb-, padding-bottom, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, pl-, padding-left, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, px-, padding-inline, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, py-, padding-block, rem, -30, 30, 1, 1rem);
// spacing - margin
@include universalMixin(true, true, true, m-, margin, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, mt-, margin-top, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, mr-, margin-right, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, mb-, margin-bottom, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, ml-, margin-left, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, mx-, margin-inline, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, my-, margin-block, px, -100, 100, 1, 1px);
@include universalMixin(true, true, true, m-, margin, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, mt-, margin-top, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, mr-, margin-right, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, mb-, margin-bottom, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, ml-, margin-left, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, mx-, margin-inline, rem, -30, 30, 1, 1rem);
@include universalMixin(true, true, true, my-, margin-block, rem, -30, 30, 1, 1rem);
// animation
@include eachValues('', $animationutilities, true);
@include eachValues('', $transitionutilities);
@include universalMixin(true, true, true, animation-delay-, animation-delay, ms, 1, 100, 100, 1ms, true);
@include universalMixin(true, true, true, animation-duration-, animation-duration, ms, 1, 100, 100, 1ms, true);
@include universalMixin(true, true, true, transition-duration-, transition-duration, ms, 1, 100, 100, 1ms, true);
@include universalMixin(true, true, true, transition-delay-, transition-delay, ms, 1, 100, 100, 1ms, true);
// background
@include eachValues('', $background);
// effects
@include shadowColor(shadow-, 0, 0, $lightdark);
@include shadowColor(shadow-, 0, 0, $fullcolors);
@include shadowColor(shadow-small-, 0, 0, $lightdark, 5px, 5px, 10px, -1px);
@include shadowColor(shadow-small-, 0, 0, $fullcolors, 5px, 5px, 10px, -1px);
@include shadowColor(shadow-large-, 0, 0, $lightdark, 15px, 15px, 30px, -5px);
@include shadowColor(shadow-large-, 0, 0, $fullcolors, 15px, 15px, 30px, -5px);
@include eachValues('', $blendModes);
@include universalMixin(true, true, true, opacity-, opacity, per, 0, 100, 1, 1%);
// transforms
@include eachValues('', $transforms);
@include transformMixin(true, true, true, scale-, transform, '', 80, 130, 1, 0.01, scale);
@include transformMixin(true, true, true, scale-x-, transform, '', 80, 130, 1, 0.01, scaleX);
@include transformMixin(true, true, true, scale-y-, transform, '', 80, 130, 1, 0.01, scaleY);
@include transformMixin(true, true, true, rotate-, transform, deg, -180, 180, 1, 1deg, rotate);
@include transformMixin(true, true, true, translate-, transform, per, 0, 100, 1, 1%, translate);
@include transformMixin(true, true, true, translate-x-, transform, per, -100, 100, 1, 1%, translateX);
@include transformMixin(true, true, true, translate-x-, transform, px, -100, 100, 1, 1px, translateX);
@include transformMixin(true, true, true, translate-x-, transform, rem, -30, 30, 1, 1rem, translateX);
@include transformMixin(true, true, true, translate-y-, transform, per, -100, 100, 1, 1%, translateY);
@include transformMixin(true, true, true, translate-y-, transform, px, -100, 100, 1, 1px, translateY);
@include transformMixin(true, true, true, translate-y-, transform, rem, -30, 30, 1, 1rem, translateY);
@include transformMixin(true, true, true, skew-x-, transform, deg, -30, 30, 1, 1deg, skewX);
@include transformMixin(true, true, true, skew-y-, transform, deg, -30, 30, 1, 1deg, skewY);
// filters
@include dropShadowMixin(drop-shadow-, 0, 0, $fullcolors, hover);
@include dropShadowMixin(drop-shadow-, 0, 0, $lightdark, hover);
@include transformMixin(true, true, true, blur-, filter, px, 0, 100, 1, 1px, blur);
@include transformMixin(true, true, true, grayscale-, filter, per, 0, 100, 1, 1%, grayscale);
@include transformMixin(true, true, true, brightness-, filter, '', 0, 50, 1, 0.1, brightness);
@include transformMixin(true, true, true, contrast-, filter, '', 0, 50, 1, 0.1, contrast);
@include transformMixin(true, true, true, hue-rotate-, filter, deg, 0, 180, 1, 1deg, hue-rotate);
@include transformMixin(true, true, true, hue-rotate-, filter, per, 0, 100, 1, 1%, hue-rotate);
@include transformMixin(true, true, true, invert-, filter, per, 0, 100, 1, 1%, invert);
@include transformMixin(true, true, true, saturate-, filter, '', 0, 50, 1, 0.1, saturate);
@include transformMixin(true, true, true, sepia-, filter, per, 0, 100, 1, 1%, sepia);
@include transformMixin(true, true, true, backdrop-blur-, backdrop-filter, px, 0, 100, 1, 1px, blur);
@include transformMixin(true, true, true, backdrop-brightness-, backdrop-filter, '', 0, 30, 1, 0.1, brightness);
@include transformMixin(true, true, true, backdrop-contrast-, backdrop-filter, '', 0, 30, 1, 0.1, contrast);
@include transformMixin(true, true, true, backdrop-grayscale-, backdrop-filter, per, 0, 100, 1, 1%, grayscale);
@include transformMixin(true, true, true, backdrop-hue-rotate-, backdrop-filter, deg, -180, 180, 1, 1deg, hue-rotate);
@include transformMixin(true, true, true, backdrop-invert-, backdrop-filter, per, 0, 100, 1, 1%, invert);
@include transformMixin(true, true, true, backdrop-opacity-, backdrop-filter, '', 0, 10, 1, 0.1, opacity);
@include transformMixin(true, true, true, backdrop-saturate-, backdrop-filter, '', 0, 30, 1, 0.1, saturate);
@include transformMixin(true, true, true, backdrop-sepia-, backdrop-filter, per, 0, 100, 1, 1%, sepia);
// borders
@include eachValues('', $border-style);
@include borderColorMixin(border-, $fullcolors, border-color, hover);
@include borderColorMixin(border-, $lightdark, border-color, hover);
@include borderColorMixin(outline-, $fullcolors, outline-color, hover);
@include borderColorMixin(outline-, $lightdark, outline-color, hover);
@include universalMixin(true, true, true, rounded-, border-radius, px, 0, 100, 1, 1px);
@include universalMixin(true, true, true, rounded-, border-radius, per, 0, 100, 1, 1%);
@include borderMixin(rounded-top-radius-, px, border-top-left-radius, 0, 100, 1, 1px, true, border-top-right-radius);
@include borderMixin(rounded-right-radius-, px, border-top-right-radius, 0, 100, 1, 1px, true, border-bottom-right-radius);
@include borderMixin(rounded-bottom-radius-, px, border-bottom-right-radius, 0, 100, 1, 1px, true, border-bottom-left-radius);
@include borderMixin(rounded-left-radius-, px, border-top-left-radius, 0, 100, 1, 1px, true, border-bottom-left-radius);
@include universalMixin(true, true, true, border-, border-width, px, 0, 10, 1, 1px);
@include borderMixin(border-x-, px, border-left-width, 0, 10, 1, 1px, true, border-right-width);
@include borderMixin(border-y-, px, border-top-width, 0, 10, 1, 1px, true, border-bottom-width);
@include universalMixin(true, true, true, border-top-width-, border-top-width, px, 0, 10, 1, 1px);
@include universalMixin(true, true, true, border-right-width-, border-right-width, px, 0, 10, 1, 1px);
@include universalMixin(true, true, true, border-bottom-width-, border-bottom-width, px, 0, 10, 1, 1px);
@include universalMixin(true, true, true, border-left-width-, border-left-width, px, 0, 10, 1, 1px);
@include universalMixin(true, true, true, outline-offset-, outline-offset, px, 0, 10, 1, 1px);
@include universalMixin(true, true, true, outline-, outline-width, px, 0, 10, 1, 1px);
// tables
@include eachValues('', $tableValues);
// interactivity
@include eachValues('', $interactivityUtilitiesWebkit, true);
@include eachValues('', $interactivityUtilities);
@include lightColor(caret-, 1, 10, caret-color, $colors);
@include lightColor(caret-, 0, 0, caret-color, $lightdark);
@include initialColor(caret-, caret-color);
@include initialColor(caret-, caret-color, active);
@include initialColor(caret-, caret-color, focus);
// interactivity - scroll margin
@include universalMixin(true, false, false, scroll-m-, scroll-margin, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-m-, scroll-margin, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-mx-, scroll-margin-inline, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-mx-, scroll-margin-inline, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-my-, scroll-margin-block, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-my-, scroll-margin-block, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-mt-, scroll-margin-top, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-mt-, scroll-margin-top, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-mr-, scroll-margin-right, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-mr-, scroll-margin-right, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-mb-, scroll-margin-bottom, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-mb-, scroll-margin-bottom, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-ml-, scroll-margin-left, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-ml-, scroll-margin-left, rem, -30, 30, 1, 1rem);
// interactivity - scroll padding
@include universalMixin(true, false, false, scroll-p-, scroll-padding, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-p-, scroll-padding, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-px-, scroll-padding-inline, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-px-, scroll-padding-inline, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-py-, scroll-padding-block, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-py-, scroll-padding-block, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-pt-, scroll-padding-top, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-pt-, scroll-padding-top, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-pr-, scroll-padding-right, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-pr-, scroll-padding-right, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-pb-, scroll-padding-bottom, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-pb-, scroll-padding-bottom, rem, -30, 30, 1, 1rem);
@include universalMixin(true, false, false, scroll-pl-, scroll-padding-left, px, -100, 100, 1, 1px);
@include universalMixin(true, false, false, scroll-pl-, scroll-padding-left, rem, -30, 30, 1, 1rem);
// svg
@include eachValues('', $svgValues);
@include lightColor(fill-, 0, 0, fill, $lightdark);
@include lightColor(fill-, 1, 10, fill, $colors);
@include initialColor(fill-, fill);
@include lightColor(stroke-, 0, 0, stroke, $lightdark);
@include lightColor(stroke-, 1, 10, stroke, $colors);
@include initialColor(stroke-, stroke);
@include universalMixin(true, true, true, stroke-, stroke-width, '', 0, 100, 1, 0.1);

// TODO: refactor borderColorMixin into eachValues. double chekc all @each mixins. Refactor "lightColor" into 1 reusable mixin. Add dark-mode classes