Generated by SassMeister.com.

input.scss

@function negative-map($map) {
  $result: ();
  @each $key, $value in $map {
    @if $value != 0 {
      $result: map-merge($result, ("-" + $key: (-$value)));
    }
  }
  @return $result;
}

$hover-overlay: 5%;
$focus-overlay: 10%;
$selected-overlay: 10%;
$activated-overlay: 10%;
$pressed-overlay: 15%;
$dragged-overlay: 15%;

$screens: (
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    xxl: '1536px',
);
$containers: (
  "" : 0,
  sm : 576px,
  md : 768px,
  lg : 992px,
  xl : 1200px,
  xxl: 1400px
);
$columns: 12;
$row-columns: 6;
$gutters: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem,
);

//Colors
$colors: (
  red-50: #ffebee,
  red-100: #ffcdd2,
  red-200: #ef9a9a,
  red-300: #e57373,
  red-400: #ef5350,
  red-500: #f44336,
  red-600: #e53935,
  red-700: #d32f2f,
  red-800: #c62828,
  red-900: #b71c1c,
  red-A100: #ff8a80,
  red-A200: #ff5252,
  red-A400: #ff1744,
  red-A700: #d50000,
  pink-50: #fce4ec,
  pink-100: #f8bbd0,
  pink-200: #f48fb1,
  pink-300: #f06292,
  pink-400: #ec407a,
  pink-500: #e91e63,
  pink-600: #d81b60,
  pink-700: #c2185b,
  pink-800: #ad1457,
  pink-900: #880e4f,
  pink-A100: #ff80ab,
  pink-A200: #ff4081,
  pink-A400: #f50057,
  pink-A700: #c51162,
  purple-50: #f3e5f5,
  purple-100: #e1bee7,
  purple-200: #ce93d8,
  purple-300: #ba68c8,
  purple-400: #ab47bc,
  purple-500: #9c27b0,
  purple-600: #8e24aa,
  purple-700: #7b1fa2,
  purple-800: #6a1b9a,
  purple-900: #4a148c,
  purple-A100: #ea80fc,
  purple-A200: #e040fb,
  purple-A400: #d500f9,
  purple-A700: #aa00ff,
  deeppurple-50: #ede7f6,
  deeppurple-100: #d1c4e9,
  deeppurple-200: #b39ddb,
  deeppurple-300: #9575cd,
  deeppurple-400: #7e57c2,
  deeppurple-500: #673ab7,
  deeppurple-600: #5e35b1,
  deeppurple-700: #512da8,
  deeppurple-800: #4527a0,
  deeppurple-900: #311b92,
  deeppurple-A100: #b388ff,
  deeppurple-A200: #7c4dff,
  deeppurple-A400: #651fff,
  deeppurple-A700: #6200ea,
  indigo-50: #e8eaf6,
  indigo-100: #c5cae9,
  indigo-200: #9fa8da,
  indigo-300: #7986cb,
  indigo-400: #5c6bc0,
  indigo-500: #3f51b5,
  indigo-600: #3949ab,
  indigo-700: #303f9f,
  indigo-800: #283593,
  indigo-900: #1a237e,
  indigo-A100: #8c9eff,
  indigo-A200: #536dfe,
  indigo-A400: #3d5afe,
  indigo-A700: #304ffe,
  blue-50: #e3f2fd,
  blue-100: #bbdefb,
  blue-200: #90caf9,
  blue-300: #64b5f6,
  blue-400: #42a5f5,
  blue-500: #2196f3,
  blue-600: #1e88e5,
  blue-700: #1976d2,
  blue-800: #1565c0,
  blue-900: #0d47a1,
  blue-A100: #82b1ff,
  blue-A200: #448aff,
  blue-A400: #2979ff,
  blue-A700: #2962ff,
  lightblue-50: #e1f5fe,
  lightblue-100: #b3e5fc,
  lightblue-200: #81d4fa,
  lightblue-300: #4fc3f7,
  lightblue-400: #29b6f6,
  lightblue-500: #03a9f4,
  lightblue-600: #039be5,
  lightblue-700: #0288d1,
  lightblue-800: #0277bd,
  lightblue-900: #01579b,
  lightblue-A100: #80d8ff,
  lightblue-A200: #40c4ff,
  lightblue-A400: #00b0ff,
  lightblue-A700: #0091ea,
  cyan-50: #e0f7fa,
  cyan-100: #b2ebf2,
  cyan-200: #80deea,
  cyan-300: #4dd0e1,
  cyan-400: #26c6da,
  cyan-500: #00bcd4,
  cyan-600: #00acc1,
  cyan-700: #0097a7,
  cyan-800: #00838f,
  cyan-900: #006064,
  cyan-A100: #84ffff,
  cyan-A200: #18ffff,
  cyan-A400: #00e5ff,
  cyan-A700: #00b8d4,
  teal-50: #e0f2f1,
  teal-100: #b2dfdb,
  teal-200: #80cbc4,
  teal-300: #4db6ac,
  teal-400: #26a69a,
  teal-500: #009688,
  teal-600: #00897b,
  teal-700: #00796b,
  teal-800: #00695c,
  teal-900: #004d40,
  teal-A100: #a7ffeb,
  teal-A200: #64ffda,
  teal-A400: #1de9b6,
  teal-A700: #00bfa5,
  green-50: #e8f5e9,
  green-100: #c8e6c9,
  green-200: #a5d6a7,
  green-300: #81c784,
  green-400: #66bb6a,
  green-500: #4caf50,
  green-600: #43a047,
  green-700: #388e3c,
  green-800: #2e7d32,
  green-900: #1b5e20,
  green-A100: #b9f6ca,
  green-A200: #69f0ae,
  green-A400: #00e676,
  green-A700: #00c853,
  lightgreen-50: #f1f8e9,
  lightgreen-100: #dcedc8,
  lightgreen-200: #c5e1a5,
  lightgreen-300: #aed581,
  lightgreen-400: #9ccc65,
  lightgreen-500: #8bc34a,
  lightgreen-600: #7cb342,
  lightgreen-700: #689f38,
  lightgreen-800: #558b2f,
  lightgreen-900: #33691e,
  lightgreen-A100: #ccff90,
  lightgreen-A200: #b2ff59,
  lightgreen-A400: #76ff03,
  lightgreen-A700: #64dd17,
  lime-50: #f9fbe7,
  lime-100: #f0f4c3,
  lime-200: #e6ee9c,
  lime-300: #dce775,
  lime-400: #d4e157,
  lime-500: #cddc39,
  lime-600: #c0ca33,
  lime-700: #afb42b,
  lime-800: #9e9d24,
  lime-900: #827717,
  lime-A100: #f4ff81,
  lime-A200: #eeff41,
  lime-A400: #c6ff00,
  lime-A700: #aeea00,
  yellow-50: #fffde7,
  yellow-100: #fff9c4,
  yellow-200: #fff59d,
  yellow-300: #fff176,
  yellow-400: #ffee58,
  yellow-500: #ffeb3b,
  yellow-600: #fdd835,
  yellow-700: #fbc02d,
  yellow-800: #f9a825,
  yellow-900: #f57f17,
  yellow-A100: #ffff8d,
  yellow-A200: #ffff00,
  yellow-A400: #ffea00,
  yellow-A700: #ffd600,
  amber-50: #fff8e1,
  amber-100: #ffecb3,
  amber-200: #ffe082,
  amber-300: #ffd54f,
  amber-400: #ffca28,
  amber-500: #ffc107,
  amber-600: #ffb300,
  amber-700: #ffa000,
  amber-800: #ff8f00,
  amber-900: #ff6f00,
  amber-A100: #ffe57f,
  amber-A200: #ffd740,
  amber-A400: #ffc400,
  amber-A700: #ffab00,
  orange-50: #fff3e0,
  orange-100: #ffe0b2,
  orange-200: #ffcc80,
  orange-300: #ffb74d,
  orange-400: #ffa726,
  orange-500: #ff9800,
  orange-600: #fb8c00,
  orange-700: #f57c00,
  orange-800: #ef6c00,
  orange-900: #e65100,
  orange-A100: #ffd180,
  orange-A200: #ffab40,
  orange-A400: #ff9100,
  orange-A700: #ff6d00,
  deeporange-50: #fbe9e7,
  deeporange-100: #ffccbc,
  deeporange-200: #ffab91,
  deeporange-300: #ff8a65,
  deeporange-400: #ff7043,
  deeporange-500: #ff5722,
  deeporange-600: #f4511e,
  deeporange-700: #e64a19,
  deeporange-800: #d84315,
  deeporange-900: #bf360c,
  deeporange-A100: #ff9e80,
  deeporange-A200: #ff6e40,
  deeporange-A400: #ff3d00,
  deeporange-A700: #dd2c00,
  brown-50: #efebe9,
  brown-100: #d7ccc8,
  brown-200: #bcaaa4,
  brown-300: #a1887f,
  brown-400: #8d6e63,
  brown-500: #795548,
  brown-600: #6d4c41,
  brown-700: #5d4037,
  brown-800: #4e342e,
  brown-900: #3e2723,
  gray-50: #fafafa,
  gray-100: #f5f5f5,
  gray-200: #eeeeee,
  gray-300: #e0e0e0,
  gray-400: #bdbdbd,
  gray-500: #9e9e9e,
  gray-600: #757575,
  gray-700: #616161,
  gray-800: #424242,
  gray-900: #212121,
  bluegray-50: #eceff1,
  bluegray-100: #cfd8dc,
  bluegray-200: #b0bec5,
  bluegray-300: #90a4ae,
  bluegray-400: #78909c,
  bluegray-500: #607d8b,
  bluegray-600: #546e7a,
  bluegray-700: #455a64,
  bluegray-800: #37474f,
  bluegray-900: #263238,
  black: #000000,
  white: #ffffff,
  transparent: transparent,
) !default;

$spacing: (
  px: 1px,
  0: 0px,
  0.5: 0.125rem,
  1: 0.25rem,
  1.5: 0.375rem,
  2: 0.5rem,
  2.5: 0.625rem,
  3: 0.75rem,
  3.5: 0.875rem,
  4: 1rem,
  5: 1.25rem,
  6: 1.5rem,
  7: 1.75rem,
  8: 2rem,
  9: 2.25rem,
  10: 2.5rem,
  11: 2.75rem,
  12: 3rem,
  14: 3.5rem,
  16: 4rem,
  20: 5rem,
  24: 6rem,
  28: 7rem,
  32: 8rem,
  36: 9rem,
  40: 10rem,
  44: 11rem,
  48: 12rem,
  52: 13rem,
  56: 14rem,
  60: 15rem,
  64: 16rem,
  72: 18rem,
  80: 20rem,
  96: 24rem,
) !default;

$negative-spacing: negative-map($spacing) !default;

$object-position: (
  bottom: bottom,
  center: center,
  left: left,
  left-bottom: left bottom,
  left-top: left top,
  right: right,
  right-bottom: right bottom,
  right-top: right top,
  top: top,
) !default;

$position-base: (
  auto: auto,
  '1\\/2': 50%,
  '1\\/3': 33.333333%,
  '2\\/3': 66.666667%,
  '1\\/4': 25%,
  '2\\/4': 50%,
  '3\\/4': 75%,
  full: 100%,
  '-1\\/2': -50%,
  '-1\\/3': -33.333333%,
  '-2\\/3': -66.666667%,
  '-1\\/4': -25%,
  '-2\\/4': -50%,
  '-3\\/4': -75%,
  '-full': -100%,
) !default;

$position-values: map-merge(map-merge($position-base, $spacing), $negative-spacing) !default;


$z-index: (
  auto: 'auto',
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
  9: 9,
  10: 10,
  20: 20,
  30: 30,
  40: 40,
  50: 50,
) !default;

$flex: (
  1: '1 1 0%',
  auto: '1 1 auto',
  initial: '0 1 auto',
  none: none,
) !default;

$flex-grow: (
  none: 0,
  "": 1,
) !default;

$flex-shrink: (
  no: 0,
  "": 1,
) !default;

$order: (
  first: '-9999',
  last: '9999',
  none: '0',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
  6: '6',
  7: '7',
  8: '8',
  9: '9',
  10: '10',
  11: '11',
  12: '12',
) !default;

$grid-auto-columns: (
  auto: 'auto',
  min: 'min-content',
  max: 'max-content',
  fr: 'minmax(0, 1fr)',
) !default;

$grid-auto-rows: (
  auto: 'auto',
  min: 'min-content',
  max: 'max-content',
  fr: 'minmax(0, 1fr)',
) !default;

$grid-column: (
  auto: 'auto',
  'span-1': 'span 1 / span 1',
  'span-2': 'span 2 / span 2',
  'span-3': 'span 3 / span 3',
  'span-4': 'span 4 / span 4',
  'span-5': 'span 5 / span 5',
  'span-6': 'span 6 / span 6',
  'span-7': 'span 7 / span 7',
  'span-8': 'span 8 / span 8',
  'span-9': 'span 9 / span 9',
  'span-10': 'span 10 / span 10',
  'span-11': 'span 11 / span 11',
  'span-12': 'span 12 / span 12',
  'span-full': '1 / -1',
) !default;

$grid-column-end: (
  auto: 'auto',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
  6: '6',
  7: '7',
  8: '8',
  9: '9',
  10: '10',
  11: '11',
  12: '12',
  13: '13',
) !default;
$grid-column-start: (
  auto: 'auto',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
  6: '6',
  7: '7',
  8: '8',
  9: '9',
  10: '10',
  11: '11',
  12: '12',
  13: '13',
) !default;

$grid-row: (
  auto: 'auto',
  'span-1': 'span 1 / span 1',
  'span-2': 'span 2 / span 2',
  'span-3': 'span 3 / span 3',
  'span-4': 'span 4 / span 4',
  'span-5': 'span 5 / span 5',
  'span-6': 'span 6 / span 6',
  'span-full': '1 / -1',
) !default;

$grid-row-start: (
  auto: 'auto',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
  6: '6',
  7: '7',
) !default;

$grid-row-end: (
  auto: 'auto',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
  6: '6',
  7: '7',
) !default;

$grid-template-columns: (
  none: 'none',
  1: 'repeat(1, minmax(0, 1fr))',
  2: 'repeat(2, minmax(0, 1fr))',
  3: 'repeat(3, minmax(0, 1fr))',
  4: 'repeat(4, minmax(0, 1fr))',
  5: 'repeat(5, minmax(0, 1fr))',
  6: 'repeat(6, minmax(0, 1fr))',
  7: 'repeat(7, minmax(0, 1fr))',
  8: 'repeat(8, minmax(0, 1fr))',
  9: 'repeat(9, minmax(0, 1fr))',
  10: 'repeat(10, minmax(0, 1fr))',
  11: 'repeat(11, minmax(0, 1fr))',
  12: 'repeat(12, minmax(0, 1fr))',
) !default;

$grid-template-rows: (
  none: 'none',
  1: 'repeat(1, minmax(0, 1fr))',
  2: 'repeat(2, minmax(0, 1fr))',
  3: 'repeat(3, minmax(0, 1fr))',
  4: 'repeat(4, minmax(0, 1fr))',
  5: 'repeat(5, minmax(0, 1fr))',
  6: 'repeat(6, minmax(0, 1fr))',
) !default;

$gap: $spacing !default;

$padding: $spacing !default;

$margin: map-merge(map-merge((auto:auto), $spacing), $negative-spacing) !default;

$width: map-merge((
  auto: 'auto',
  '1\\/2': '50%',
  '1\\/3': '33.333333%',
  '2\\/3': '66.666667%',
  '1\\/4': '25%',
  '2\\/4': '50%',
  '3\\/4': '75%',
  '1\\/5': '20%',
  '2\\/5': '40%',
  '3\\/5': '60%',
  '4\\/5': '80%',
  '1\\/6': '16.666667%',
  '2\\/6': '33.333333%',
  '3\\/6': '50%',
  '4\\/6': '66.666667%',
  '5\\/6': '83.333333%',
  '1\\/12': '8.333333%',
  '2\\/12': '16.666667%',
  '3\\/12': '25%',
  '4\\/12': '33.333333%',
  '5\\/12': '41.666667%',
  '6\\/12': '50%',
  '7\\/12': '58.333333%',
  '8\\/12': '66.666667%',
  '9\\/12': '75%',
  '10\\/12': '83.333333%',
  '11\\/12': '91.666667%',
  full: '100%',
  screen: '100vw',
  min: 'min-content',
  max: 'max-content',
), $spacing) !default;

$height: $width !default;

$min-width: (
  0: 0,
  full: 100%,
  min: min-content,
  max: max-content,
) !default;

$max-width: (
  none: none,
  0: 0rem,
  xs: 20rem,
  sm: 24rem,
  md: 28rem,
  lg: 32rem,
  xl: 36rem,
  2xl: 42rem,
  3xl: 48rem,
  4xl: 56rem,
  5xl: 64rem,
  6xl: 72rem,
  7xl: 80rem,
  full: 100%,
  min: min-content,
  max: max-content,
  prose: 65ch,
) !default;

$min-height: $min-width !default;

$max-height: $max-width !default;

$font-family: (
  sans: unquote('ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'),
  serif: unquote('ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'),
  mono: unquote('ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'),
) !default;

$font-size: (
  xs: '0.75rem',
  sm: '0.875rem',
  base: '1rem',
  lg: '1.125rem',
  xl: '1.25rem',
  '2xl': '1.5rem',
  '3xl': '1.875rem',
  '4xl': '2.25rem',
  '5xl': '3rem',
  '6xl': '3.75rem',
  '7xl': '4.5rem',
  '8xl': '6rem',
  '9xl': '8rem',
) !default;

$font-line-height: (
  '1rem',
  '1.25rem',
  '1.5rem',
  '1.75rem',
  '1.75rem',
  '2rem',
  '2.25rem',
  '2.5rem',
  '1',
  '1',
  '1',
  '1',
  '1',
) !default;

$font-weight: (
  thin: '100',
  extralight: '200',
  light: '300',
  normal: '400',
  medium: '500',
  semibold: '600',
  bold: '700',
  extrabold: '800',
  black: '900',
) !default;

$letter-spacing: (
  tighter: '-0.05em',
  tight: '-0.025em',
  normal: '0em',
  wide: '0.025em',
  wider: '0.05em',
  widest: '0.1em',
) !default;

$placeholder-color: $colors !default;

$opacity: (
  0: '0',
  5: '0.05',
  10: '0.1',
  20: '0.2',
  25: '0.25',
  30: '0.3',
  40: '0.4',
  50: '0.5',
  60: '0.6',
  70: '0.7',
  75: '0.75',
  80: '0.8',
  90: '0.9',
  95: '0.95',
  100: '1',
) !default;

$placeholder-opacity: $opacity !default;

$line-height: (
  none: '1',
  tight: '1.25',
  snug: '1.375',
  normal: '1.5',
  relaxed: '1.625',
  loose: '2',
  3: '.75rem',
  4: '1rem',
  5: '1.25rem',
  6: '1.5rem',
  7: '1.75rem',
  8: '2rem',
  9: '2.25rem',
  10: '2.5rem',
) !default;

$background-color: $colors !default;

$background-image: (
  none: 'none',
  'gradient-to-t': 'linear-gradient(to top, var(--mh-gradient-stops))',
  'gradient-to-tr': 'linear-gradient(to top right, var(--mh-gradient-stops))',
  'gradient-to-r': 'linear-gradient(to right, var(--mh-gradient-stops))',
  'gradient-to-br': 'linear-gradient(to bottom right, var(--mh-gradient-stops))',
  'gradient-to-b': 'linear-gradient(to bottom, var(--mh-gradient-stops))',
  'gradient-to-bl': 'linear-gradient(to bottom left, var(--mh-gradient-stops))',
  'gradient-to-l': 'linear-gradient(to left, var(--mh-gradient-stops))',
  'gradient-to-tl': 'linear-gradient(to top left, var(--mh-gradient-stops))',
) !default;

$background-opacity: $opacity !default;

$background-position: (
  bottom: 'bottom',
  center: 'center',
  left: 'left',
  'left-bottom': 'left bottom',
  'left-top': 'left top',
  right: 'right',
  'right-bottom': 'right bottom',
  'right-top': 'right top',
  top: 'top',
) !default;

$background-size: (
  auto: 'auto',
  cover: 'cover',
  contain: 'contain',
) !default;





@mixin css($prefix: "") {
  $prefix: "";
  $sep: ":";

  // Layout

  .#{$prefix}border-box {
    box-sizing: border-box;
  }
  .#{$prefix}content-box {
    box-sizing: content-box;
  }

  @each $type
    in (
      inline
        inline-block
        block
        grid
        table
        table-row
        table-caption
        table-cell
        table-raw
        table-column
        table-column-group
        table-footer-group
        table-raw-group
        flex
        inline-flex
        flow-root
        grid
        inline-grid
        contents
        none
    )
  {
    .#{$prefix}#{$type} {
      display: #{$type};
    }
  }

  .#{$prefix}float {
    @each $value in (left right none) {
      &#{$sep}#{$value} {
        float: #{$value};
      }
    }
  }

  .#{$prefix}clear {
    @each $value in (left right both none) {
      &#{$sep}#{$value} {
        clear: #{$value};
      }
    }
  }

  .#{$prefix}object-fit {
    @each $value in (contain cover fill none scale-down) {
      &#{$sep}#{$value} {
        object-fit: #{$value};
      }
    }
  }

  .#{$prefix}object-position {
    @each $key, $value in $object-position {
      &#{$sep}#{$key} {
        object-position: #{$value};
      }
    }
  }

  .#{$prefix}overflow {
    @each $value in (auto hidden visible scroll) {
      &#{$sep}#{$value} {
        overflow: #{$value};
      }
      &-x#{$sep}#{$value} {
        overflow-x: #{$value};
      }
      &-y#{$sep}-y#{$value} {
        overflow-y: #{$value};
      }
    }
  }

  .#{$prefix}overscroll {
    @each $value in (auto contain none) {
      &#{$sep}#{$value} {
        overscroll-behavior: #{$value};
      }
      &-x#{$sep}#{$value} {
        overscroll-behavior-x: #{$value};
      }
      &-y#{$sep}-y#{$value} {
        overscroll-behavior-y: #{$value};
      }
    }
  }
}

@each $value in (static relative absolute fixed sticky) {
  .#{$prefix}#{$value} {
    position: #{$value};
  }
}

@each $key, $value in $position-values {
  @each $side in (top left right bottom) {
    .#{$prefix}#{$sep}#{$side}#{$sep}#{$key} {
      #{$side}: #{$value};
    }
  }
}
.#{$prefix}#inset#{$sep}#{$key} {
  top: #{$value};
  bottom: #{$value};
  left: #{$value};
  right: #{$value};
}
.#{$prefix}#inset-y#{$sep}#{$key} {
  top: #{$value};
  bottom: #{$value};
}
.#{$prefix}#inset-x#{$sep}#{$key} {
  left: #{$value};
  right: #{$value};
}
.#{$prefix}invisible {
  visibility: invisible;
}
.#{$prefix}visible {
  visibility: visible;
}
.#{$prefix}z {
  @each $value in $z-index {
    &#{$sep}#{$value} {
      z-index: #{$value};
    }
  }
}

// Flex
.#{$prefix}flex {
  @each $key,
    $value
      in (
        row: row,
        row-reverse: row-reverse,
        col: column,
        col-reverse: column-reverse
      )
  {
    &#{$sep}#{$key} {
      flex-direction: #{$value};
    }
  }
  @each $value in (wrap wrap-reverse nowrap) {
    &#{$sep}#{$value} {
      flex-wrap: #{$value};
    }
  }
  @each $key, $value in $flex {
    &#{$sep}#{$key} {
      flex: #{$value};
    }
  }
  @each $key, $value in $flex-grow {
    &#{$sep}#{$key} {
      flex-grow: #{$value};
    }
  }
  @each $key, $value in $flex-shrink {
    &#{$sep}#{$key} {
      flex-shrink: #{$value};
    }
  }
}





@include css();

output.css

.css {
  color: blue;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}