@import "./css-vars/css-vars";
$css-vars-use-native: true;

$white:  #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:  #000;

/*
 * @emas/components default theme
 */
$ema-color: $gray-800;
$ema-primary: #007bff;
$ema-secondary: #6c757d;
$ema-success: #28a745;
$ema-info: #17a2b8;
$ema-warning: #ffc107;
$ema-danger: #dc3545;
$ema-light: #f8f9fa;
$ema-dark: #343a40;

$ema-background: $white;
$ema-background-light: $gray-100;
$ema-background-dark: $gray-700;
$ema-background-diap: rgba(29, 29, 29, 0.97);
$ema-border-color: #c5c9cd;
$ema-border: 1px solid $ema-border-color;
$ema-border-radius: 3px 3px 3px 3px;
$ema-box-shadow: 1px 1px 10px 1px #ccc;

$ema-margin: 0.25rem;
$ema-margin-sm: 0.5rem;
$ema-margin-md: 1rem;
$ema-margin-lg: 1.5rem;
$ema-margin-xl: 2rem;
$ema-padding: $ema-margin;
$ema-padding-sm: $ema-margin-sm;
$ema-padding-md: $ema-margin-md;
$ema-padding-lg: $ema-margin-lg;
$ema-padding-xl: $ema-margin-xl;


// css variables
@include css-vars((
        --ema-color: $ema-color,
        --ema-primary: $ema-primary,
        --ema-secondary: $ema-secondary,
        --ema-success: $ema-success,
        --ema-info: $ema-info,
        --ema-warning: $ema-warning,
        --ema-danger: $ema-danger,
        --ema-light: $ema-light,
        --ema-dark: $ema-dark,

        --ema-background: $ema-background,
        --ema-background-diap: $ema-background-diap,
        --ema-border-color: $ema-border-color,
        --ema-border: $ema-border,
        --ema-border-radius: $ema-border-radius,
        --ema-box-shadow: $ema-box-shadow,

        --ema-margin: $ema-margin,
        --ema-margin-sm: $ema-margin-sm,
        --ema-margin-md: $ema-margin-md,
        --ema-margin-lg: $ema-margin-lg,
        --ema-margin-xl: $ema-margin-xl,
        --ema-padding: $ema-padding,
        --ema-padding-sm: $ema-padding-sm,
        --ema-padding-md: $ema-padding-md,
        --ema-padding-lg: $ema-padding-lg,
        --ema-padding-xl: $ema-padding-xl,

        --ema-gray-100: $gray-100,
        --ema-gray-200: $gray-200,
        --ema-gray-300: $gray-300,
        --ema-gray-400: $gray-400,
        --ema-gray-500: $gray-500,
        --ema-gray-600: $gray-600,
        --ema-gray-700: $gray-700,
        --ema-gray-800: $gray-800,
        --ema-gray-900: $gray-900,

));

