@require "colors.styl";

/* Font Properties */
$default-font-family ?= Arial, Helvetica, sans-serif;

/* Box properties */
$default-padding ?= 12px;
$default-padding-small ?= 5px;
$default-padding-large ?= 20px;
$default-margin ?= 0px;
$default-margin-layout ?= 10px;
$default-border-width ?= 1px;
$default-border-radius ?= 5px;
$default-spacing ?= 12px;
$default-font-size ?= 0.9em;
$default-font-size-small ?= 0.7em;
$default-font-size-large ?= 1.1em;
$default-divider-width ?= 1px;

/* Color Properties */
$default-background-color ?= $white;
$default-color ?= $black;
$default-border-color ?= $gray;
$default-foreground-background-color ?= $gray-light;
$default-header-background-color ?= #ddd;
$default-header-color ?= $black;
$basic-color ?= $white;
$basic-color-alt ?= $black;
$widget-color ?= #ddd;
$widget-color-alt ?= $black;
$primary-color ?= $blue;
$primary-color-alt ?= $white;
$success-color ?= $green;
$success-color-alt ?= $white;
$info-color ?= $blue-light;
$info-color-alt ?= $white;
$warning-color ?= $orange;
$warning-color-alt ?= $white;
$danger-color ?= $red;
$danger-color-alt ?= $white;
$disabled-color ?= #ddd;
$disabled-color-alt ?= $gray;

/* Size Properties */
$size-xs ?= 375px;
$size-sm ?= 576px;
$size-md ?= 768px;
$size-lg ?= 992px;
$size-xl ?= 1200px;

/* Shadow Properties */
$box-shadow-height-0 ?= 0 1px 1px 0 rgba(0, 0, 0, 0.3);
$box-shadow-height-1 ?= 0 2px 10px 0 rgba(0, 0, 0, 0.3);
$box-shadow-height-2 ?= 0 0 20px 0 rgba(0, 0, 0, 0.3);
$background-color-layer-0 ?= #eee;
$background-color-layer-1 ?= #fafafa;
$background-color-layer-2 ?= #fff;

/* Animation Properties */
$default-animation-time ?= 0.2s;
$default-animation-time-slow ?= 0.5s;

:root {
    --size-xs: $size-xs;
    --size-sm: $size-sm;
    --size-md: $size-md;
    --size-lg: $size-lg;
    --size-xl: $size-xl;
}