@use '../../abstracts/variables/sizing/variables' as *;
@use '../../abstracts/variables/color/variables' as *;
@use '../../abstracts/variables/effects/variables' as *;
@use '../../abstracts/variables/flex-grid/variables' as *;
@use '../../abstracts/variables/layout/variables' as *;
@use '../../abstracts/variables/tables/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/effects/mixin' as *;
@use '../../abstracts/mixins/filters/mixin' as *;
@use '../../abstracts/mixins/borders/mixin' as *;
@use '../../abstracts/mixins/breakpoints/mixin' as *;

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

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

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