$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;

/***************************/

$breakpoint-xs: 480px !default;
$breakpoint-sm: 576px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;
$breakpoint-xxl: 1600px !default;

$breakpoints: (
    "break-point-xs": $breakpoint-xs,
    "break-point-sm": $breakpoint-sm,
    "break-point-md": $breakpoint-md,
    "break-point-lg": $breakpoint-lg,
    "break-point-xl": $breakpoint-xl,
    "break-point-xxl": $breakpoint-xxl,
);

$dark1-bg: #2f353a !default;
$dark1-text: #abaeb0 !default;

$placeholder-color: #aaa !default;

@mixin scrollbar($light, $size: 6px) {
    ::-webkit-scrollbar {
        width: $size;
    }
    /* Track */
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    /* Handle */
    ::-webkit-scrollbar-thumb {
        border-radius: 2px;

        @if $light {
            background: #ccc;
        } @else {
            background: #666;
        }
    }
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        @if $light {
            background: #bbb;
        } @else {
            background: #777;
        }
    }
}