// @import "./color.scss";
@import "./easing.scss";
@import "./breakpoint.scss";

// @import "./vxe-variable.scss";
// @import "./toastification.scss";

$namespace: longjoe;

/* global css variable */
$logo-container-height: 64px;

$shadow-0-down: 0 1px 1px -1px rgba(0, 0, 0, 0.05), 0 3px 3px 0px rgba(0, 0, 0, 0.03), 0 5px 6px 2px rgba(0, 0, 0, 0.02);
$shadow-1-down: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0px rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
$shadow-1-down-inset: 0 1px 2px -2px rgba(0, 0, 0, 0.16) inset, 0 3px 6px 0px rgba(0, 0, 0, 0.12) inset,
  0 5px 12px 4px rgba(0, 0, 0, 0.09) inset;
$shadow-2-down: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
$shadow-3-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0px rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
$shadow-3-down-inset: 0 6px 16px -8px rgba(0, 0, 0, 0.08) inset, 0 9px 28px 0px rgba(0, 0, 0, 0.05) inset,
  0 12px 48px 16px rgba(0, 0, 0, 0.03) inset;

/* global border radius */
$br-xs: 2px;
$br-sm: 4px;
$br-md: 8px;
$br-lg: 16px;
$br-xl: 32px;

/* global space */
$space-a1: 4px;
$space-a2: 16px;
$space-a3: 24px;
$space-a4: 40px;
$space-a5: 64px;
$space-a6: 104px;
$space-b1: 8px;
$space-b2: 12px;
$space-b3: 20px;
$space-b4: 32px;
$space-b5: 48px;
$space-b6: 80px;

// $bg-gold:

@mixin effect-style-shadow-1-2-down() {
  box-shadow: 0px 1px 2px -2px rgba(0, 0, 0, 0.06), 0px 3px 6px rgba(0, 0, 0, 0.03), 0px 5px 12px 4px rgba(0, 0, 0, 0.02);
}
@mixin effect-style-shadow-1-2-down-inset() {
  box-shadow: 0px 1px 2px -2px rgba(0, 0, 0, 0.06) inset, 0px 3px 6px rgba(0, 0, 0, 0.03) inset,
    0px 5px 12px 4px rgba(0, 0, 0, 0.02) inset;
}
@mixin effect-style-shadow-1-down() {
  box-shadow: 0px 1px 2px -2px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.12), 0px 5px 12px 4px rgba(0, 0, 0, 0.09);
}
@mixin effect-style-shadow-2-down() {
  box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
}
@mixin effect-style-shadow-3-down() {
  box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.08), 0px 9px 28px rgba(0, 0, 0, 0.05), 0px 12px 48px 16px rgba(0, 0, 0, 0.03);
}
@mixin effect-style-shadow-4-down() {
  box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.04), 0px 9px 28px rgba(0, 0, 0, 0.03), 0px 12px 48px 16px rgba(0, 0, 0, 0.01);
}

$primary-bg-color: var(--lj-color-primary-500);
$primary-color: var(--lj-color-primary-500);

$color-black: var(--lj-color-black);
$color-white: var(--lj-color-white);
$color-background: var(--lj-color-background);
$color-gray-1: var(--lj-color-gray-1);
$color-gray-2: var(--lj-color-gray-2);
$color-gray-3: var(--lj-color-gray-3);
$color-gray-4: var(--lj-color-gray-4);
$color-gray-5: var(--lj-color-gray-5);
$color-gray-6: var(--lj-color-gray-6);
$color-gray-7: var(--lj-color-gray-7);
$color-gray-8: var(--lj-color-gray-8);
$color-gray-9: var(--lj-color-gray-9);
$color-gray-10: var(--lj-color-gray-10);
$color-gray-11: var(--lj-color-gray-11);
$color-gray-12: var(--lj-color-gray-12);
$color-gray-13: var(--lj-color-gray-13);
$color-primary-000: var(--lj-color-primary-000);
$color-primary-100: var(--lj-color-primary-100);
$color-primary-200: var(--lj-color-primary-200);
$color-primary-300: var(--lj-color-primary-300);
$color-primary-400: var(--lj-color-primary-400);
$color-primary-500: var(--lj-color-primary-500);
$color-primary-600: var(--lj-color-primary-600);
$color-primary-700: var(--lj-color-primary-700);
$color-primary-800: var(--lj-color-primary-800);
$color-primary-900: var(--lj-color-primary-900);
$color-dust-red-1-8: var(--lj-color-dust-red-1-8);
$color-dust-red-1: var(--lj-color-dust-red-1);
$color-dust-red-2: var(--lj-color-dust-red-2);
$color-dust-red-3: var(--lj-color-dust-red-3);
$color-dust-red-4: var(--lj-color-dust-red-4);
$color-dust-red-5: var(--lj-color-dust-red-5);
$color-dust-red-6: var(--lj-color-dust-red-6);
$color-dust-red-7: var(--lj-color-dust-red-7);
$color-dust-red-8: var(--lj-color-dust-red-8);
$color-dust-red-9: var(--lj-color-dust-red-9);
$color-dust-red-10: var(--lj-color-dust-red-10);
$color-calendula-gold-1: var(--lj-color-calendula-gold-1);
$color-calendula-gold-2: var(--lj-color-calendula-gold-2);
$color-calendula-gold-3: var(--lj-color-calendula-gold-3);
$color-calendula-gold-4: var(--lj-color-calendula-gold-4);
$color-calendula-gold-5: var(--lj-color-calendula-gold-5);
$color-calendula-gold-6: var(--lj-color-calendula-gold-6);
$color-calendula-gold-7: var(--lj-color-calendula-gold-7);
$color-calendula-gold-8: var(--lj-color-calendula-gold-8);
$color-calendula-gold-9: var(--lj-color-calendula-gold-9);
$color-calendula-gold-10: var(--lj-color-calendula-gold-10);
$color-cyan-1: var(--lj-color-cyan-1);
$color-cyan-2: var(--lj-color-cyan-2);
$color-cyan-3: var(--lj-color-cyan-3);
$color-cyan-4: var(--lj-color-cyan-4);
$color-cyan-5: var(--lj-color-cyan-5);
$color-cyan-6: var(--lj-color-cyan-6);
$color-cyan-7: var(--lj-color-cyan-7);
$color-cyan-8: var(--lj-color-cyan-8);
$color-cyan-9: var(--lj-color-cyan-9);
$color-cyan-10: var(--lj-color-cyan-10);
$color-geek-blue-1-8: var(--lj-color-geek-blue-1-8);
$color-geek-blue-1: var(--lj-color-geek-blue-1);
$color-geek-blue-2: var(--lj-color-geek-blue-2);
$color-geek-blue-3: var(--lj-color-geek-blue-3);
$color-geek-blue-4: var(--lj-color-geek-blue-4);
$color-geek-blue-5: var(--lj-color-geek-blue-5);
$color-geek-blue-6: var(--lj-color-geek-blue-6);
$color-geek-blue-7: var(--lj-color-geek-blue-7);
$color-geek-blue-8: var(--lj-color-geek-blue-8);
$color-geek-blue-9: var(--lj-color-geek-blue-9);
$color-geek-blue-10: var(--lj-color-geek-blue-10);
$color-golden-purple-1: var(--lj-color-golden-purple-1);
$color-golden-purple-2: var(--lj-color-golden-purple-2);
$color-golden-purple-3: var(--lj-color-golden-purple-3);
$color-golden-purple-4: var(--lj-color-golden-purple-4);
$color-golden-purple-5: var(--lj-color-golden-purple-5);
$color-golden-purple-6: var(--lj-color-golden-purple-6);
$color-golden-purple-7: var(--lj-color-golden-purple-7);
$color-golden-purple-8: var(--lj-color-golden-purple-8);
$color-golden-purple-9: var(--lj-color-golden-purple-9);
$color-golden-purple-10: var(--lj-color-golden-purple-10);
$color-lime-1: var(--lj-color-lime-1);
$color-lime-2: var(--lj-color-lime-2);
$color-lime-3: var(--lj-color-lime-3);
$color-lime-4: var(--lj-color-lime-4);
$color-lime-5: var(--lj-color-lime-5);
$color-lime-6: var(--lj-color-lime-6);
$color-lime-7: var(--lj-color-lime-7);
$color-lime-8: var(--lj-color-lime-8);
$color-lime-9: var(--lj-color-lime-9);
$color-lime-10: var(--lj-color-lime-10);
$color-magenta-1: var(--lj-color-magenta-1);
$color-magenta-2: var(--lj-color-magenta-2);
$color-magenta-3: var(--lj-color-magenta-3);
$color-magenta-4: var(--lj-color-magenta-4);
$color-magenta-5: var(--lj-color-magenta-5);
$color-magenta-6: var(--lj-color-magenta-6);
$color-magenta-7: var(--lj-color-magenta-7);
$color-magenta-8: var(--lj-color-magenta-8);
$color-magenta-9: var(--lj-color-magenta-9);
$color-magenta-10: var(--lj-color-magenta-10);
$color-polar-green-1-8: var(--lj-color-polar-green-1-8);
$color-polar-green-1: var(--lj-color-polar-green-1);
$color-polar-green-2: var(--lj-color-polar-green-2);
$color-polar-green-3: var(--lj-color-polar-green-3);
$color-polar-green-4: var(--lj-color-polar-green-4);
$color-polar-green-5: var(--lj-color-polar-green-5);
$color-polar-green-6: var(--lj-color-polar-green-6);
$color-polar-green-7: var(--lj-color-polar-green-7);
$color-polar-green-8: var(--lj-color-polar-green-8);
$color-polar-green-9: var(--lj-color-polar-green-9);
$color-polar-green-10: var(--lj-color-polar-green-10);
$color-sunrise-yellow-1: var(--lj-color-sunrise-yellow-1);
$color-sunrise-yellow-2: var(--lj-color-sunrise-yellow-2);
$color-sunrise-yellow-3: var(--lj-color-sunrise-yellow-3);
$color-sunrise-yellow-4: var(--lj-color-sunrise-yellow-4);
$color-sunrise-yellow-5: var(--lj-color-sunrise-yellow-5);
$color-sunrise-yellow-6: var(--lj-color-sunrise-yellow-6);
$color-sunrise-yellow-7: var(--lj-color-sunrise-yellow-7);
$color-sunrise-yellow-8: var(--lj-color-sunrise-yellow-8);
$color-sunrise-yellow-9: var(--lj-color-sunrise-yellow-9);
$color-sunrise-yellow-10: var(--lj-color-sunrise-yellow-10);
$color-sunset-orange-1: var(--lj-color-sunset-orange-1);
$color-sunset-orange-2: var(--lj-color-sunset-orange-2);
$color-sunset-orange-3: var(--lj-color-sunset-orange-3);
$color-sunset-orange-4: var(--lj-color-sunset-orange-4);
$color-sunset-orange-5: var(--lj-color-sunset-orange-5);
$color-sunset-orange-6: var(--lj-color-sunset-orange-6);
$color-sunset-orange-7: var(--lj-color-sunset-orange-7);
$color-sunset-orange-8: var(--lj-color-sunset-orange-8);
$color-sunset-orange-9: var(--lj-color-sunset-orange-9);
$color-sunset-orange-10: var(--lj-color-sunset-orange-10);
$color-volcano-1: var(--lj-color-volcano-1);
$color-volcano-2: var(--lj-color-volcano-2);
$color-volcano-3: var(--lj-color-volcano-3);
$color-volcano-4: var(--lj-color-volcano-4);
$color-volcano-5: var(--lj-color-volcano-5);
$color-volcano-6: var(--lj-color-volcano-6);
$color-volcano-7: var(--lj-color-volcano-7);
$color-volcano-8: var(--lj-color-volcano-8);
$color-volcano-9: var(--lj-color-volcano-9);
$color-volcano-10: var(--lj-color-volcano-10);
$color-text-table-header: var(--lj-color-text-table-header);
$color-text-background: var(--lj-color-text-background);
$color-text-dividers: var(--lj-color-text-dividers);
$color-text-border: var(--lj-color-text-border);
$color-text-disable: var(--lj-color-text-disable);
$color-text-secondary-text: var(--lj-color-text-secondary-text);
$color-text-primary-text: var(--lj-color-text-primary-text);
$color-text-title: var(--lj-color-text-title);
$color-bg-overlay: var(--lj-color-bg-overlay);
