$x-prefix: x;

// Colors
$x-primary: var(--x-primary);
$x-primary-a100: var(--x-primary-a100);
$x-primary-a200: var(--x-primary-a200);
$x-primary-a300: var(--x-primary-a300);
$x-primary-a400: var(--x-primary-a400);
$x-primary-a500: var(--x-primary-a500);
$x-primary-a600: var(--x-primary-a600);
$x-primary-a700: var(--x-primary-a700);
$x-primary-a800: var(--x-primary-a800);
$x-primary-a900: var(--x-primary-a900);
$x-primary-100: var(--x-primary-100);
$x-primary-200: var(--x-primary-200);
$x-primary-300: var(--x-primary-300);
$x-primary-400: var(--x-primary-400);
$x-primary-500: var(--x-primary-500);
$x-primary-600: var(--x-primary-600);
$x-primary-700: var(--x-primary-700);
$x-primary-800: var(--x-primary-800);
$x-primary-900: var(--x-primary-900);
$x-success: var(--x-success);
$x-success-a100: var(--x-success-a100);
$x-success-a200: var(--x-success-a200);
$x-success-a300: var(--x-success-a300);
$x-success-a400: var(--x-success-a400);
$x-success-a500: var(--x-success-a500);
$x-success-a600: var(--x-success-a600);
$x-success-a700: var(--x-success-a700);
$x-success-a800: var(--x-success-a800);
$x-success-a900: var(--x-success-a900);
$x-success-100: var(--x-success-100);
$x-success-200: var(--x-success-200);
$x-success-300: var(--x-success-300);
$x-success-400: var(--x-success-400);
$x-success-500: var(--x-success-500);
$x-success-600: var(--x-success-600);
$x-success-700: var(--x-success-700);
$x-success-800: var(--x-success-800);
$x-success-900: var(--x-success-900);
$x-warning: var(--x-warning);
$x-warning-a100: var(--x-warning-a100);
$x-warning-a200: var(--x-warning-a200);
$x-warning-a300: var(--x-warning-a300);
$x-warning-a400: var(--x-warning-a400);
$x-warning-a500: var(--x-warning-a500);
$x-warning-a600: var(--x-warning-a600);
$x-warning-a700: var(--x-warning-a700);
$x-warning-a800: var(--x-warning-a800);
$x-warning-a900: var(--x-warning-a900);
$x-warning-100: var(--x-warning-100);
$x-warning-200: var(--x-warning-200);
$x-warning-300: var(--x-warning-300);
$x-warning-400: var(--x-warning-400);
$x-warning-500: var(--x-warning-500);
$x-warning-600: var(--x-warning-600);
$x-warning-700: var(--x-warning-700);
$x-warning-800: var(--x-warning-800);
$x-warning-900: var(--x-warning-900);
$x-danger: var(--x-danger);
$x-danger-a100: var(--x-danger-a100);
$x-danger-a200: var(--x-danger-a200);
$x-danger-a300: var(--x-danger-a300);
$x-danger-a400: var(--x-danger-a400);
$x-danger-a500: var(--x-danger-a500);
$x-danger-a600: var(--x-danger-a600);
$x-danger-a700: var(--x-danger-a700);
$x-danger-a800: var(--x-danger-a800);
$x-danger-a900: var(--x-danger-a900);
$x-danger-100: var(--x-danger-100);
$x-danger-200: var(--x-danger-200);
$x-danger-300: var(--x-danger-300);
$x-danger-400: var(--x-danger-400);
$x-danger-500: var(--x-danger-500);
$x-danger-600: var(--x-danger-600);
$x-danger-700: var(--x-danger-700);
$x-danger-800: var(--x-danger-800);
$x-danger-900: var(--x-danger-900);
$x-info: var(--x-info);
$x-info-a100: var(--x-info-a100);
$x-info-a200: var(--x-info-a200);
$x-info-a300: var(--x-info-a300);
$x-info-a400: var(--x-info-a400);
$x-info-a500: var(--x-info-a500);
$x-info-a600: var(--x-info-a600);
$x-info-a700: var(--x-info-a700);
$x-info-a800: var(--x-info-a800);
$x-info-a900: var(--x-info-a900);
$x-info-100: var(--x-info-100);
$x-info-200: var(--x-info-200);
$x-info-300: var(--x-info-300);
$x-info-400: var(--x-info-400);
$x-info-500: var(--x-info-500);
$x-info-600: var(--x-info-600);
$x-info-700: var(--x-info-700);
$x-info-800: var(--x-info-800);
$x-info-900: var(--x-info-900);
$x-text: var(--x-text);
$x-text-a100: var(--x-text-a100);
$x-text-a200: var(--x-text-a200);
$x-text-a300: var(--x-text-a300);
$x-text-a400: var(--x-text-a400);
$x-text-a500: var(--x-text-a500);
$x-text-a600: var(--x-text-a600);
$x-text-a700: var(--x-text-a700);
$x-text-a800: var(--x-text-a800);
$x-text-a900: var(--x-text-a900);
$x-text-100: var(--x-text-100);
$x-text-200: var(--x-text-200);
$x-text-300: var(--x-text-300);
$x-text-400: var(--x-text-400);
$x-text-500: var(--x-text-500);
$x-text-600: var(--x-text-600);
$x-text-700: var(--x-text-700);
$x-text-800: var(--x-text-800);
$x-text-900: var(--x-text-900);
$x-border: var(--x-border);
$x-border-a100: var(--x-border-a100);
$x-border-a200: var(--x-border-a200);
$x-border-a300: var(--x-border-a300);
$x-border-a400: var(--x-border-a400);
$x-border-a500: var(--x-border-a500);
$x-border-a600: var(--x-border-a600);
$x-border-a700: var(--x-border-a700);
$x-border-a800: var(--x-border-a800);
$x-border-a900: var(--x-border-a900);
$x-border-100: var(--x-border-100);
$x-border-200: var(--x-border-200);
$x-border-300: var(--x-border-300);
$x-border-400: var(--x-border-400);
$x-border-500: var(--x-border-500);
$x-border-600: var(--x-border-600);
$x-border-700: var(--x-border-700);
$x-border-800: var(--x-border-800);
$x-border-900: var(--x-border-900);
$x-black: var(--x-black);
$x-white: var(--x-white);
$x-background: var(--x-background);
$x-background-a100: var(--x-background-a100);
$x-background-a200: var(--x-background-a200);
$x-background-a300: var(--x-background-a300);
$x-background-a400: var(--x-background-a400);
$x-background-a500: var(--x-background-a500);
$x-background-a600: var(--x-background-a600);
$x-background-a700: var(--x-background-a700);
$x-background-a800: var(--x-background-a800);
$x-background-a900: var(--x-background-a900);
$x-background-100: var(--x-background-100);
$x-background-200: var(--x-background-200);
$x-background-300: var(--x-background-300);
$x-background-400: var(--x-background-400);
$x-background-500: var(--x-background-500);
$x-background-600: var(--x-background-600);
$x-background-700: var(--x-background-700);
$x-background-800: var(--x-background-800);
$x-background-900: var(--x-background-900);

// Font
$x-font-size: var(--x-font-size);
$x-font-variant: var(--x-font-variant);
$x-font-family: var(--x-font-family);
$x-font-code-family: var(--x-font-code-family);
$x-font-size-mini: var(--x-font-size-mini);
$x-font-size-small: var(--x-font-size-small);
$x-font-size-medium: var(--x-font-size-medium);
$x-font-size-large: var(--x-font-size-large);
$x-font-size-big: var(--x-font-size-big);
$x-line-height: var(--x-line-height);
$x-placeholder-color: $x-text-700;

// Height
$x-height-big: var(--x-height-big);
$x-height-large: var(--x-height-large);
$x-height-medium: var(--x-height-medium);
$x-height-small: var(--x-height-small);
$x-height-mini: var(--x-height-mini);

// Paddings
$x-padding-big: var(--x-padding-big);
$x-padding-large: var(--x-padding-large);
$x-padding-medium: var(--x-padding-medium);
$x-padding-small: var(--x-padding-small);
$x-padding-mini: var(--x-padding-mini);

// Border
$x-border-style: var(--x-border-style);
$x-border-radius: var(--x-border-radius);
$x-border-small-radius: var(--x-border-small-radius);
$x-border-width: var(--x-border-width);
$x-border-base: $x-border-width $x-border-style $x-border;

// box-shadow
$x-box-shadow: var(--x-box-shadow);
$x-box-shadow-hover: var(--x-box-shadow-hover);
$x-box-shadow-top: var(--x-box-shadow-top);
$x-box-shadow-right: var(--x-box-shadow-right);
$x-box-shadow-bottom: var(--x-box-shadow-bottom);
$x-box-shadow-left: var(--x-box-shadow-left);

// Animation
$x-animation-duration-slow: var(--x-animation-duration-slow);
$x-animation-duration-base: var(--x-animation-duration-base);
$x-animation-duration-fast: var(--x-animation-duration-fast);

// Controls
$x-control-padding-horizontal: $x-padding-medium;
$x-control-padding-vertical: $x-padding-medium;

// Layout
$x-col-layout: 24;

$x-sm: 768px !default;
$x-md: 992px !default;
$x-lg: 1200px !default;
$x-xl: 1920px !default;

$x-size-range: (
  'xs': (
    max-width: $x-sm - 1
  ),
  'sm': (
    min-width: $x-sm
  ),
  'md': (
    min-width: $x-md
  ),
  'lg': (
    min-width: $x-lg
  ),
  'xl': (
    min-width: $x-xl
  )
);

$x-size-range-only: (
  'xs-only': (
    max-width: $x-sm - 1
  ),
  'sm-and-up': (
    min-width: $x-sm
  ),
  'sm-only': (
    min-width: $x-sm
  )
  and
  (
    max-width: $x-md - 1
  ),
  'sm-and-down': (
    max-width: $x-md - 1
  ),
  'md-and-up': (
    min-width: $x-md
  ),
  'md-only': (
    min-width: $x-md
  )
  and
  (
    max-width: $x-lg - 1
  ),
  'md-and-down': (
    max-width: $x-lg - 1
  ),
  'lg-and-up': (
    min-width: $x-lg
  ),
  'lg-only': (
    min-width: $x-lg
  )
  and
  (
    max-width: $x-xl - 1
  ),
  'lg-and-down': (
    max-width: $x-xl - 1
  ),
  'xl-only': (
    min-width: $x-xl
  )
);