//-------------------- Toolkit --------------------//

$vendor-prefix: "" !default;
$size-small-class: "small" !default;
$size-large-class: "large" !default;
$shape-round-class: "round" !default;
$shape-oval-class: "oval" !default;
$shape-pill-class: "pill" !default;
$shape-skew-class: "skew" !default;

//-------------------- Colors --------------------//

$gray-lightest: #fbfbfb !default;
$gray-light: #f8f8f8 !default;
$gray: #f5f5f5 !default;
$gray-dark: #e5e5e5 !default;
$gray-darkest: #c2c2c2 !default;

$background-color: #fff !default;
$foreground-color: #2d2d2d !default;

//-------------------- Sizes --------------------//

$base-size: 14px !default;
$base-line-height: 1.25em !default;

$h1-size: 3rem !default;
$h2-size: 2.5rem !default;
$h3-size: 2.1rem !default;
$h4-size: 1.8rem !default;
$h5-size: 1.5rem !default;
$h6-size: 1.2rem !default;

//-------------------- Spacing --------------------//

$padding: .75rem !default;
$margin: 1.25rem !default;

$small-size: .7rem !default;
$small-padding: .5rem !default;

$medium-size: 1rem !default;
$medium-padding: $padding !default;

$large-size: 1.3rem !default;
$large-padding: 1rem !default;

//-------------------- States --------------------//

$default: #929497 !default;
$default-light: #d0d2d3 !default;
$default-dark: #404041 !default;

$info: #45c5eb !default;
$info-light: #dbf1fa !default;
$info-dark: #4067ab !default;

$warning: #fcd04b !default;
$warning-light: #ffebb5 !default;
$warning-dark: #c87e00 !default;

$success: #97cb6f !default;
$success-light: #e7f2dd !default;
$success-dark: #226b36 !default;

$error: #f06060 !default;
$error-light: #fdc5c1 !default;
$error-dark: #b10e0e !default;

//-------------------- Border Styles --------------------//

$round: .2rem !default;

$pill: 2rem !default;

$oval-x: 7rem !default;
$oval-y: 2.75rem !default;

$skew-x: 1rem !default;
$skew-y: 3rem !default;
$skew: $skew-x $skew-y;
$skew-reverse: $skew-y $skew-x;

//-------------------- Opacity --------------------//

$default-opacity: .5 !default;
$disabled-opacity: $default-opacity !default;
$blackout-opacity: .85 !default;
$carousel-opacity: $default-opacity !default;
$mask-opacity: .85 !default;
$showcase-opacity: $default-opacity !default;

//-------------------- Transitions --------------------//

$default-transition: .3s !default;
$accordion-transition: $default-transition !default;
$blackout-transition: $default-transition !default;
$carousel-transition: 1s !default;
$drop-transition: $default-transition !default;
$flyout-transition: $default-transition !default;
$lazyLoad-transition: $default-transition !default;
$mask-transition: $default-transition !default;
$matrix-transition: $default-transition !default;
$modal-transition: $default-transition !default;
$offCanvas-transition: .5s !default;
$pin-transition: .2s !default;
$progress-transition: .5s !default;
$showcase-transition: $default-transition !default;
$switch-transition: $default-transition !default;
$toast-transition: $default-transition !default;
$tooltip-transition: .15s !default;
$typeAhead-transition: $default-transition !default;

//-------------------- Z Index --------------------//

// 1) Modal and Showcase should be higher than Blackout
// 2) Tooltip and Popover should be higher than Modals in case they exist within them
// 3) Off Canvas should be the lowest so everything can display above it

$blackout-zindex: 600 !default;
$drop-zindex: 500 !default;
$flyout-zindex: 500 !default;
$mask-zindex: 500 !default;
$modal-zindex: 610 !default;
$offCanvas-zindex: 250 !default;
$popover-zindex: 700 !default;
$showcase-zindex: 610 !default;
$toast-zindex: 500 !default;
$tooltip-zindex: 700 !default;
$typeAhead-zindex: 500 !default;

//-------------------- Responsive --------------------//

$responsive-design: "mobile" !default; // mobile, desktop
$responsive-size: "both" !default; // device, size, both

$breakpoint-desktop: 1440px !default;
$breakpoint-laptop: 1280px !default;
$breakpoint-tablet-landscape: 1024px !default;
$breakpoint-tablet-portrait: 768px !default;
$breakpoint-mobile-landscape: 480px !default;
$breakpoint-mobile-portrait: 320px !default;

$breakpoint-small: 768px !default;
$breakpoint-medium: 1280px !default;
$breakpoint-large: 1440px !default;

//-------------------- Grid --------------------//

$grid-columns-large: 12 !default;
$grid-columns-medium: 12 !default;
$grid-columns-small: 6 !default;

$grid-columns-desktop: 12 !default;
$grid-columns-tablet: 6 !default;
$grid-columns-mobile: 3 !default;

$grid-width: 100% !default;
$grid-gutter: false !default;
$grid-push-pull: true !default;

//-------------------- Loader --------------------//

$loader-type: "all" !default;
$loader-color: #000 !default;
$loader-wave-count: 5 !default;
$loader-bar-width: 0.65rem !default;
$loader-bar-height: 2.5rem !default;
$loader-bubble-size: 1.5rem !default;

//-------------------- Modal --------------------//

$modal-animation: ("fade", "from-above", "from-below", "slide-in-top", "slide-in-right", "slide-in-bottom", "slide-in-left") !default;
$modal-mobile-breakpoint: 640px !default; // iOS5

//-------------------- Off Canvas --------------------//

$offCanvas-left-width: 20% !default;
$offCanvas-right-width: 20% !default;
$offCanvas-left-width-mobile: 90% !default;
$offCanvas-right-width-mobile: 90% !default;
$offCanvas-mobile-breakpoint: 640px !default; // iOS5

//-------------------- Toast --------------------//

$toast-animation: ("fade", "slide-up", "slide-down", "slide-left", "slide-right") !default;
$toast-position: (
    "top-left", "top-center", "top-right", "center-left",
    "center-right", "bottom-left", "bottom-center", "bottom-right"
) !default;

//-------------------- Popover, Tooltip --------------------//

$popover-tooltip-animation: ("fade", "from-above", "from-below", "flip-rotate") !default;
$popover-arrow-width: 8 !default;
$tooltip-arrow-width: 6 !default;

//-------------------- Imports --------------------//

@import "mixins/helper";
@import "mixins/unit";
@import "mixins/layout";
@import "mixins/state";
@import "mixins/grid";
@import "mixins/responsive";
@import "mixins/components";