$black: #000;
$white: #fff;
$gray-1: #f8f8f8;
$gray-2: #f2f3f5;
$gray-3: #ededee;
$gray-4: #dedede;
$gray-5: #c8c9cc;
$gray-6: #a4a5a8;
$gray-7: #969799;
$gray-8: #646464;
$gray-9: #323233;
$gray-10: #141e2b;
$red: #ee0a24;
$blue: #0088fe;
$orange: #f38040;
$orange-dark: #f55f4e;
$orange-light: #f9eae4;
$green: #07c160;

$text-color: $gray-9;
$active-color: $gray-2;
$active-opacity: 0.7;
$disabled-opacity: 0.5;
$background-color: $gray-1;
$background-color-light: #fafafa;
$text-link-color: #576b95;
$text-tip-color: $gray-6;

// Padding
$padding-base: 4px;
$padding-xs: $padding-base * 2;
$padding-sm: $padding-base * 3;
$padding-md: $padding-base * 4;
$padding-lg: $padding-base * 6;
$padding-xl: $padding-base * 8;

// Font
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;

// Border Radius
$border-radius-xs: 2px;
$border-radius-sm: 4px;
$border-radius-md: 6px;
$border-radius-lg: 8px;
$border-radius-xl: 16px;

// Semantic Color
$primary-color: $blue;
$info-color: $green;
$danger-color: $red;
$warning-color: $orange;

$border-color: $gray-3;

$loading-color: rgba(69, 90, 100, 0.6);