$theme-colors: map-merge(
  flatten(
    (
      // Bootstrap Main Colors
      white: #ffffff,
      black: #000000,
      gray: (
        100: #f7fafc,
        200: #edf2f7,
        300: #e2e8f0,
        400: #cbd5e0,
        500: #a0aec0,
        600: #718096,
        700: #4a5568,
        800: #2d3748,
        900: #1a202c,
      ),
      blue: (
        100: tint-color(#3b82f6, 80%),
        200: tint-color(#3b82f6, 60%),
        300: tint-color(#3b82f6, 40%),
        400: tint-color(#3b82f6, 20%),
        500: #3b82f6,
        600: shade-color(#3b82f6, 20%),
        700: shade-color(#3b82f6, 40%),
        800: shade-color(#3b82f6, 60%),
        900: shade-color(#3b82f6, 80%),
      ),
      indigo: (
        100: tint-color(#8b5cf6, 80%),
        200: tint-color(#8b5cf6, 60%),
        300: tint-color(#8b5cf6, 40%),
        400: tint-color(#8b5cf6, 20%),
        500: #8b5cf6,
        600: shade-color(#8b5cf6, 20%),
        700: shade-color(#8b5cf6, 40%),
        800: shade-color(#8b5cf6, 60%),
        900: shade-color(#8b5cf6, 80%),
      ),
      purple: (
        100: tint-color(#8b5cf6, 80%),
        200: tint-color(#8b5cf6, 60%),
        300: tint-color(#8b5cf6, 40%),
        400: tint-color(#8b5cf6, 20%),
        500: #8b5cf6,
        600: shade-color(#8b5cf6, 20%),
        700: shade-color(#8b5cf6, 40%),
        800: shade-color(#8b5cf6, 60%),
        900: shade-color(#8b5cf6, 80%),
      ),
      pink: (
        100: tint-color(#ec4899, 80%),
        200: tint-color(#ec4899, 60%),
        300: tint-color(#ec4899, 40%),
        400: tint-color(#ec4899, 20%),
        500: #ec4899,
        600: shade-color(#ec4899, 20%),
        700: shade-color(#ec4899, 40%),
        800: shade-color(#ec4899, 60%),
        900: shade-color(#ec4899, 80%),
      ),
      red: (
        100: tint-color(#ef4444, 80%),
        200: tint-color(#ef4444, 60%),
        300: tint-color(#ef4444, 40%),
        400: tint-color(#ef4444, 20%),
        500: #ef4444,
        600: shade-color(#ef4444, 20%),
        700: shade-color(#ef4444, 40%),
        800: shade-color(#ef4444, 60%),
        900: shade-color(#ef4444, 80%),
      ),
      orange: (
        100: tint-color(#fd7e14, 80%),
        200: tint-color(#fd7e14, 60%),
        300: tint-color(#fd7e14, 40%),
        400: tint-color(#fd7e14, 20%),
        500: #fd7e14,
        600: shade-color(#fd7e14, 20%),
        700: shade-color(#fd7e14, 40%),
        800: shade-color(#fd7e14, 60%),
        900: shade-color(#fd7e14, 80%),
      ),
      yellow: (
        100: tint-color(#f59e0b, 80%),
        200: tint-color(#f59e0b, 60%),
        300: tint-color(#f59e0b, 40%),
        400: tint-color(#f59e0b, 20%),
        500: #f59e0b,
        600: shade-color(#f59e0b, 20%),
        700: shade-color(#f59e0b, 40%),
        800: shade-color(#f59e0b, 60%),
        900: shade-color(#f59e0b, 80%),
      ),
      green: (
        100: tint-color(#10b981, 80%),
        200: tint-color(#10b981, 60%),
        300: tint-color(#10b981, 40%),
        400: tint-color(#10b981, 20%),
        500: #10b981,
        600: shade-color(#10b981, 20%),
        700: shade-color(#10b981, 40%),
        800: shade-color(#10b981, 60%),
        900: shade-color(#10b981, 80%),
      ),
      teal: (
        100: tint-color(#20c997, 80%),
        200: tint-color(#20c997, 60%),
        300: tint-color(#20c997, 40%),
        400: tint-color(#20c997, 20%),
        500: #20c997,
        600: shade-color(#20c997, 20%),
        700: shade-color(#20c997, 40%),
        800: shade-color(#20c997, 60%),
        900: shade-color(#20c997, 80%),
      ),
      cyan: (
        100: tint-color(#0dcaf0, 80%),
        200: tint-color(#0dcaf0, 60%),
        300: tint-color(#0dcaf0, 40%),
        400: tint-color(#0dcaf0, 20%),
        500: #0dcaf0,
        600: shade-color(#0dcaf0, 20%),
        700: shade-color(#0dcaf0, 40%),
        800: shade-color(#0dcaf0, 60%),
        900: shade-color(#0dcaf0, 80%),
      )
    )
  ),
  $theme-colors
);

// Body
$body-bg: white;
$body-color: map-get($theme-colors, gray-800);

// Color System
$primary: map-get($theme-colors, blue-500);
$secondary: map-get($theme-colors, gray-200);
$success: map-get($theme-colors, green-500);
$warning: map-get($theme-colors, yellow-500);
$danger: map-get($theme-colors, red-500);
$dark: map-get($theme-colors, gray-800);

$blue: map-get($theme-colors, blue-500);
$indigo: map-get($theme-colors, indigo-500);
$purple: map-get($theme-colors, purple-500);
$pink: map-get($theme-colors, pink-500);
$red: map-get($theme-colors, red-500);
$orange: map-get($theme-colors, orange-500);
$yellow: map-get($theme-colors, yellow-500);
$green: map-get($theme-colors, green-500);
$teal: map-get($theme-colors, teal-500);
$cyan: map-get($theme-colors, cyan-500);
$gray: map-get($theme-colors, gray-600);
$gray-dark: map-get($theme-colors, gray-800);

$gray-100: map-get($theme-colors, gray-100);
$gray-200: map-get($theme-colors, gray-200);
$gray-300: map-get($theme-colors, gray-300);
$gray-400: map-get($theme-colors, gray-400);
$gray-500: map-get($theme-colors, gray-500);
$gray-600: map-get($theme-colors, gray-600);
$gray-700: map-get($theme-colors, gray-700);
$gray-800: map-get($theme-colors, gray-800);
$gray-900: map-get($theme-colors, gray-900);

$blue-100: map-get($theme-colors, blue-100);
$blue-200: map-get($theme-colors, blue-200);
$blue-300: map-get($theme-colors, blue-300);
$blue-400: map-get($theme-colors, blue-400);
$blue-500: map-get($theme-colors, blue-500);
$blue-600: map-get($theme-colors, blue-600);
$blue-700: map-get($theme-colors, blue-700);
$blue-800: map-get($theme-colors, blue-800);
$blue-900: map-get($theme-colors, blue-900);

$indigo-100: map-get($theme-colors, indigo-100);
$indigo-200: map-get($theme-colors, indigo-200);
$indigo-300: map-get($theme-colors, indigo-300);
$indigo-400: map-get($theme-colors, indigo-400);
$indigo-500: map-get($theme-colors, indigo-500);
$indigo-600: map-get($theme-colors, indigo-600);
$indigo-700: map-get($theme-colors, indigo-700);
$indigo-800: map-get($theme-colors, indigo-800);
$indigo-900: map-get($theme-colors, indigo-900);

$purple-100: map-get($theme-colors, purple-100);
$purple-200: map-get($theme-colors, purple-200);
$purple-300: map-get($theme-colors, purple-300);
$purple-400: map-get($theme-colors, purple-400);
$purple-500: map-get($theme-colors, purple-500);
$purple-600: map-get($theme-colors, purple-600);
$purple-700: map-get($theme-colors, purple-700);
$purple-800: map-get($theme-colors, purple-800);
$purple-900: map-get($theme-colors, purple-900);

$pink-100: map-get($theme-colors, pink-100);
$pink-200: map-get($theme-colors, pink-200);
$pink-300: map-get($theme-colors, pink-300);
$pink-400: map-get($theme-colors, pink-400);
$pink-500: map-get($theme-colors, pink-500);
$pink-600: map-get($theme-colors, pink-600);
$pink-700: map-get($theme-colors, pink-700);
$pink-800: map-get($theme-colors, pink-800);
$pink-900: map-get($theme-colors, pink-900);

$red-100: map-get($theme-colors, red-100);
$red-200: map-get($theme-colors, red-200);
$red-300: map-get($theme-colors, red-300);
$red-400: map-get($theme-colors, red-400);
$red-500: map-get($theme-colors, red-500);
$red-600: map-get($theme-colors, red-600);
$red-700: map-get($theme-colors, red-700);
$red-800: map-get($theme-colors, red-800);
$red-900: map-get($theme-colors, red-900);

$orange-100: map-get($theme-colors, orange-100);
$orange-200: map-get($theme-colors, orange-200);
$orange-300: map-get($theme-colors, orange-300);
$orange-400: map-get($theme-colors, orange-400);
$orange-500: map-get($theme-colors, orange-500);
$orange-600: map-get($theme-colors, orange-600);
$orange-700: map-get($theme-colors, orange-700);
$orange-800: map-get($theme-colors, orange-800);
$orange-900: map-get($theme-colors, orange-900);

$yellow-100: map-get($theme-colors, yellow-100);
$yellow-200: map-get($theme-colors, yellow-200);
$yellow-300: map-get($theme-colors, yellow-300);
$yellow-400: map-get($theme-colors, yellow-400);
$yellow-500: map-get($theme-colors, yellow-500);
$yellow-600: map-get($theme-colors, yellow-600);
$yellow-700: map-get($theme-colors, yellow-700);
$yellow-800: map-get($theme-colors, yellow-800);
$yellow-900: map-get($theme-colors, yellow-900);

$green-100: map-get($theme-colors, green-100);
$green-200: map-get($theme-colors, green-200);
$green-300: map-get($theme-colors, green-300);
$green-400: map-get($theme-colors, green-400);
$green-500: map-get($theme-colors, green-500);
$green-600: map-get($theme-colors, green-600);
$green-700: map-get($theme-colors, green-700);
$green-800: map-get($theme-colors, green-800);
$green-900: map-get($theme-colors, green-900);

$teal-100: map-get($theme-colors, teal-100);
$teal-200: map-get($theme-colors, teal-200);
$teal-300: map-get($theme-colors, teal-300);
$teal-400: map-get($theme-colors, teal-400);
$teal-500: map-get($theme-colors, teal-500);
$teal-600: map-get($theme-colors, teal-600);
$teal-700: map-get($theme-colors, teal-700);
$teal-800: map-get($theme-colors, teal-800);
$teal-900: map-get($theme-colors, teal-900);

$cyan-100: map-get($theme-colors, cyan-100);
$cyan-200: map-get($theme-colors, cyan-200);
$cyan-300: map-get($theme-colors, cyan-300);
$cyan-400: map-get($theme-colors, cyan-400);
$cyan-500: map-get($theme-colors, cyan-500);
$cyan-600: map-get($theme-colors, cyan-600);
$cyan-700: map-get($theme-colors, cyan-700);
$cyan-800: map-get($theme-colors, cyan-800);
$cyan-900: map-get($theme-colors, cyan-900);

// Variant Separator
$separator: \:;

// Grid Breakpoint
$grid-breakpoints: (
  xs: 0px,
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  \2xl: 1536px,
);

// Spacing
$spacer-config: (
  px: 1px,
  0.5: $spacer * 0.125,
  1: $spacer * 0.25,
  1.5: $spacer * 0.375,
  2: $spacer * 0.5,
  2.5: $spacer * 0.625,
  3: $spacer * 0.75,
  3.5: $spacer * 0.875,
  4: $spacer * 1,
  5: $spacer * 1.25,
  6: $spacer * 1.5,
  7: $spacer * 1.75,
  8: $spacer * 2,
  9: $spacer * 2.25,
  10: $spacer * 2.5,
  11: $spacer * 2.75,
  12: $spacer * 3,
  14: $spacer * 3.5,
  16: $spacer * 4,
  20: $spacer * 5,
  24: $spacer * 6,
  28: $spacer * 7,
  32: $spacer * 8,
  36: $spacer * 9,
  40: $spacer * 10,
  44: $spacer * 11,
  48: $spacer * 12,
  52: $spacer * 13,
  56: $spacer * 14,
  60: $spacer * 15,
  64: $spacer * 16,
  72: $spacer * 18,
  80: $spacer * 20,
  96: $spacer * 24,
  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%,
);

// Shadow
$shadow-config: (
  sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
  null: (
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
  ),
  md: (
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
  ),
  lg: (
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05),
  ),
  xl: (
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
  ),
  2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
  inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
  none: 0 0 #0000,
);

$border-width-config: (
  0: 0,
  null: 1px,
  2: 2px,
  4: 4px,
  8: 8px,
);

$border-radius-config: (
  none: 0,
  sm: 0.125rem,
  null: 0.25rem,
  md: 0.375rem,
  lg: 0.5rem,
  xl: 0.75rem,
  2xl: 1rem,
  3xl: 1.5rem,
  full: 9999px,
);

$outline-config: (
  none: (
    2px solid transparent,
    2px,
  ),
  white: (
    2px dotted white,
    2px,
  ),
  black: (
    2px dotted black,
    2px,
  ),
);

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

$font-family-config: (
  sans: (
    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: (
    ui-serif,
    Georgia,
    Cambria,
    "Times New Roman",
    Times,
    serif,
  ),
  mono: (
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace,
  ),
);

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

$z-index-config: (0 10 20 30 40 50 auto);

$opacity-config: (
  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,
);

$stroke-width-config: (
  0: 0,
  1: 1,
  2: 2,
);

$scale-config: (
  0: 0,
  50: 0.5,
  75: 0.75,
  90: 0.9,
  95: 0.95,
  100: 1,
  105: 1.05,
  110: 1.1,
  125: 1.25,
  150: 1.5,
);

$gap-config: (
  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,
  px: 1px,
);

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

$grid-auto-flow-config: (
  row: row,
  col: column,
  row-dense: row dense,
  col-dense: column dense,
);

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

$grid-column-config: (
  auto: auto,
  span-1: list.slash(span 1, span 1),
  span-2: list.slash(span 2, span 2),
  span-3: list.slash(span 3, span 3),
  span-4: list.slash(span 4, span 4),
  span-5: list.slash(span 5, span 5),
  span-6: list.slash(span 6, span 6),
  span-7: list.slash(span 7, span 7),
  span-8: list.slash(span 8, span 8),
  span-9: list.slash(span 9, span 9),
  span-10: list.slash(span 10, span 10),
  span-11: list.slash(span 11, span 11),
  span-12: list.slash(span 12, span 12),
  span-full: list.slash(1, -1),
);

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

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

$grid-row-config: (
  auto: auto,
  span-1: list.slash(span 1, span 1),
  span-2: list.slash(span 2, span 2),
  span-3: list.slash(span 3, span 3),
  span-4: list.slash(span 4, span 4),
  span-5: list.slash(span 5, span 5),
  span-6: list.slash(span 6, span 6),
  span-full: list.slash(1, -1),
);

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

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

$grid-template-columns-config: (
  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)),
  none: none,
);

$grid-template-rows-config: (
  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)),
  none: none,
);

$min-width-config: (
  0: 0px,
  full: 100%,
  min: min-content,
  max: max-content,
);

$max-width-config: (
  0: 0rem,
  none: none,
  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,
  screen-sm: 640px,
  screen-md: 768px,
  screen-lg: 1024px,
  screen-xl: 1280px,
  screen-2xl: 1536px,
);

$min-height-config: (
  0: 0px,
  full: 100%,
  screen: 100vh,
);

$max-height-config: (
  0: 0px,
  0t: 0.125rem,
  1: 0.25rem,
  1t: 0.375rem,
  2: 0.5rem,
  2t: 0.625rem,
  3: 0.75rem,
  3t: 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,
  px: 1px,
  full: 100%,
  screen: 100vh,
);

$background-opacity-config: (
  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,
);

$rotate-config: (
  0: 0deg,
  1: 1deg,
  2: 2deg,
  3: 3deg,
  6: 6deg,
  12: 12deg,
  45: 45deg,
  90: 90deg,
  180: 180deg,
);

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

$space-between-config: (
  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,
  px: 1px,
);

$placeholder-opacity-config: (
  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,
);

$text-opacity-config: (
  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,
);

$border-opacity-config: (
  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,
);

$divide-width-config: (
  0: 0px,
  2: 2px,
  4: 4px,
  8: 8px,
  null: 1px,
);

$divide-opacity-config: (
  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,
);

$ring-width-config: (
  0: 0px,
  1: 1px,
  2: 2px,
  null: 3px,
  4: 4px,
  8: 8px,
);

$ring-opacity-config: (
  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,
);

$ring-offset-width-config: (
  0: 0px,
  1: 1px,
  2: 2px,
  4: 4px,
  8: 8px,
);

$blur-config: (
  none: 0,
  sm: 4px,
  null: 8px,
  md: 12px,
  lg: 16px,
  xl: 24px,
  2xl: 40px,
  3xl: 64px,
);

$brightness-config: (
  0: 0,
  50: 0.5,
  75: 0.75,
  90: 0.9,
  95: 0.95,
  100: 1,
  105: 1.05,
  110: 1.1,
  125: 1.25,
  150: 1.5,
  200: 2,
);

$contrast-config: (
  0: 0,
  50: 0.5,
  75: 0.75,
  100: 1,
  125: 1.25,
  150: 1.5,
  200: 2,
);

$drop-shadow-config: (
  sm: (
    0 1px 1px rgba(0, 0, 0, 0.05),
  ),
  null: (
    (0 1px 2px rgba(0, 0, 0, 0.1)),
    (0 1px 1px rgba(0, 0, 0, 0.06)),
  ),
  md: (
    (0 4px 3px rgba(0, 0, 0, 0.07)),
    (0 2px 2px rgba(0, 0, 0, 0.06)),
  ),
  lg: (
    (0 10px 8px rgba(0, 0, 0, 0.04)),
    (0 4px 3px rgba(0, 0, 0, 0.1)),
  ),
  xl: (
    (0 20px 13px rgba(0, 0, 0, 0.03)),
    (0 8px 5px rgba(0, 0, 0, 0.08)),
  ),
  2xl: (
    0 25px 25px rgba(0, 0, 0, 0.15),
  ),
  none: (
    0 0 #0000,
  ),
);

$gray-scale-config: (
  0: 0,
  null: 1,
);

$hue-rotate-config: (
  0: 0deg,
  15: 15deg,
  30: 30deg,
  60: 60deg,
  90: 90deg,
  180: 180deg,
);

$invert-config: (
  0: 0,
  null: 1,
);

$saturate-config: (
  0: 0,
  50: 0.5,
  100: 1,
  150: 1.5,
  200: 2,
);

$sepia-config: (
  0: 0,
  null: 1,
);

$backdrop-brightness-config: (
  0: 0,
  50: 0.5,
  75: 0.75,
  90: 0.9,
  95: 0.95,
  100: 1,
  105: 1.05,
  110: 1.1,
  125: 1.25,
  150: 1.5,
  200: 2,
);

$backdrop-contrast-config: (
  0: 0,
  50: 0.5,
  75: 0.75,
  100: 1,
  125: 1.25,
  150: 1.5,
  200: 2,
);

$backdrop-hue-rotate-config: (
  0: 0deg,
  15: 15deg,
  30: 30deg,
  60: 60deg,
  90: 90deg,
  180: 180deg,
);

$backdrop-opacity-config: (
  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,
);

$backdrop-saturate-config: (
  0: 0,
  50: 0.5,
  100: 1,
  150: 1.5,
  200: 2,
);

$backdrop-sepia-config: (
  0: 0,
  null: 1,
);

$backdrop-blur-config: (
  none: 0,
  sm: 4px,
  null: 8px,
  md: 12px,
  lg: 16px,
  xl: 24px,
  2xl: 40px,
  3xl: 64px,
);

$backdrop-grayscale-config: (
  0: 0,
  null: 1,
);

$backdrop-invert-config: (
  0: 0,
  null: 1,
);

$transition-duration-config: (
  75: 75ms,
  100: 100ms,
  150: 150ms,
  200: 200ms,
  300: 300ms,
  500: 500ms,
  700: 700ms,
  1000: 1000ms,
);

$transition-timing-function-config: (
  linear: linear,
  in: cubic-bezier(0.4, 0, 1, 1),
  out: cubic-bezier(0, 0, 0.2, 1),
  in-out: cubic-bezier(0.4, 0, 0.2, 1),
);

$transition-delay-config: (
  75: 75ms,
  100: 100ms,
  150: 150ms,
  200: 200ms,
  300: 300ms,
  500: 500ms,
  700: 700ms,
  1000: 1000ms,
);

$animation-config: (
  none: none,
  spin: spin 1s linear infinite,
  ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite,
  pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite,
  bounce: bounce 1s infinite,
);

$transform-origin-config: (
  center: center,
  top: top,
  top-right: top right,
  right: right,
  bottom-right: bottom right,
  bottom: bottom,
  bottom-left: bottom left,
  left: left,
  top-left: top left,
);

$translate-config: (
  0: 0px,
  px: 1px,
  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,
  1\/2: 50%,
  1\/3: 33.333333%,
  2\/3: 66.666667%,
  1\/4: 25%,
  2\/4: 50%,
  3\/4: 75%,
  full: 100%,
);

$skew-config: (
  0: 0deg,
  1: 1deg,
  2: 2deg,
  3: 3deg,
  6: 6deg,
  12: 12deg,
);

$variants-config: (
  screen-readers: responsive focus-within focus,
  align-content: responsive,
  align-items: responsive,
  align-self: responsive,
  animation: responsive,
  appearance: responsive,
  backdrop-blur: responsive,
  backdrop-brightness: responsive,
  backdrop-contrast: responsive,
  backdrop-filter: responsive,
  backdrop-grayscale: responsive,
  backdrop-hue-rotate: responsive,
  backdrop-invert: responsive,
  backdrop-opacity: responsive,
  backdrop-saturate: responsive,
  backdrop-sepia: responsive,
  background-attachment: responsive,
  background-blend-mode: responsive,
  background-clip: responsive,
  background-color: responsive dark group-hover focus-within hover focus,
  background-image: responsive,
  background-opacity: responsive dark group-hover focus-within hover focus,
  background-position: responsive,
  background-repeat: responsive,
  background-size: responsive,
  background-origin: responsive,
  blur: responsive,
  border-collapse: responsive,
  border-color: responsive dark group-hover focus-within hover focus,
  border-opacity: responsive dark group-hover focus-within hover focus,
  border-radius: responsive,
  border-style: responsive,
  border-width: responsive,
  box-decoration-break: responsive,
  box-shadow: responsive group-hover focus-within hover focus,
  box-sizing: responsive,
  brightness: responsive,
  clear: responsive,
  contrast: responsive,
  cursor: responsive,
  display: responsive,
  divide-color: responsive dark,
  divide-opacity: responsive dark,
  divide-style: responsive,
  divide-width: responsive,
  drop-shadow: responsive,
  fill: responsive,
  filter: responsive,
  flex: responsive,
  flex-direction: responsive,
  flex-grow: responsive,
  flex-shrink: responsive,
  flex-wrap: responsive,
  float: responsive,
  font-family: responsive,
  font-size: responsive,
  font-smoothing: responsive,
  font-style: responsive,
  font-variant-numeric: responsive,
  font-weight: responsive,
  gap: responsive,
  gradient-color-stops: responsive dark hover focus,
  grayscale: responsive,
  grid-auto-columns: responsive,
  grid-auto-flow: responsive,
  grid-auto-rows: responsive,
  grid-column: responsive,
  grid-column-end: responsive,
  grid-column-start: responsive,
  grid-row: responsive,
  grid-row-end: responsive,
  grid-row-start: responsive,
  grid-template-columns: responsive,
  grid-template-rows: responsive,
  height: responsive,
  hue-rotate: responsive,
  inset: responsive,
  invert: responsive,
  isolation: responsive,
  justify-content: responsive,
  justify-items: responsive,
  justify-self: responsive,
  letter-spacing: responsive,
  line-height: responsive,
  list-style-position: responsive,
  list-style-type: responsive,
  margin: responsive,
  max-height: responsive,
  max-width: responsive,
  min-height: responsive,
  min-width: responsive,
  mix-blend-mode: responsive,
  object-fit: responsive,
  object-position: responsive,
  opacity: responsive group-hover focus-within hover focus,
  order: responsive,
  outline: responsive focus-within focus,
  overflow: responsive,
  overscroll-behavior: responsive,
  padding: responsive,
  place-content: responsive,
  place-items: responsive,
  place-self: responsive,
  placeholder-color: responsive dark focus,
  placeholder-opacity: responsive dark focus,
  pointer-events: responsive,
  position: responsive,
  resize: responsive,
  ring-color: responsive dark focus-within focus,
  ring-offset-color: responsive dark focus-within focus,
  ring-offset-width: responsive focus-within focus,
  ring-opacity: responsive dark focus-within focus,
  ring-width: responsive focus-within focus,
  rotate: responsive hover focus,
  saturate: responsive,
  scale: responsive hover focus,
  sepia: responsive,
  skew: responsive hover focus,
  space: responsive,
  stroke: responsive,
  stroke-width: responsive,
  table-layout: responsive,
  text-align: responsive,
  text-color: responsive dark group-hover focus-within hover focus,
  text-decoration: responsive group-hover focus-within hover focus,
  text-opacity: responsive dark group-hover focus-within hover focus,
  text-overflow: responsive,
  text-transform: responsive,
  transform: responsive,
  transform-origin: responsive,
  transition-delay: responsive,
  transition-duration: responsive,
  transition-property: responsive,
  transition-timing-function: responsive,
  translate: responsive hover focus,
  user-select: responsive,
  vertical-align: responsive,
  visibility: responsive,
  whitespace: responsive,
  width: responsive,
  word-break: responsive,
  z-index: responsive focus-within focus,
);