// Colors
$color-primary: #61BD4F !default;
$color-secondary: #FFA726 !default;

$color-success: #4CAF50 !default;
$color-error: #FF5252 !default;
$color-warn: #FB8C00 !default;
$color-info: #2196F3 !default;

$color-light: #fff !default;
$color-dark: #3C4858 !default;

$color-grey: #DDDDDD !default;
$color-grey-dark: darken($color-grey, 15%) !default;
$color-grey-light: lighten($color-grey, 10%) !default;

$color-disabled: #EDEDED !default;
$color-enabled: $color-primary !default;

// Typography
$g-font-family: 'Roboto', sans-serif !default;
$g-font-size: 16px !default;
$g-font-weight: 400 !default;
$g-font-color: #3C4858 !default;
$g-line-height: 1.25 !default;

// Selected text
$g-selected-font-color: #FFF !default;
$g-selected-background: $color-primary !default;

// Border
$g-border: 1px solid #DDD;
$g-border-width: nth($g-border, 1) !default;
$g-border-style: nth($g-border, 2) !default;
$g-border-color: nth($g-border, 3) !default;
$g-border-radius: .375rem !default;
$g-border-radius-lg: .75rem !default;

// Transition
$g-transition: .15s ease !default;

// Gutter
$g-gutter: 15px !default;

// Elevation
$elevation-start-index: 0 !default;
$elevation-end-index: 24 !default;

$elevation-umbra-opacity: .15 !default; // default = 0.2
$elevation-penumbra-opacity: .1 !default; // default = 0.14
$elevation-ambient-opacity: .09 !default; // default = 0.12

$elevation-umbra-map: (
        0: "0px 0px 0px 0px",
        1: "0px 2px 1px -1px",
        2: "0px 3px 1px -2px",
        3: "0px 3px 3px -2px",
        4: "0px 2px 4px -1px",
        5: "0px 3px 5px -1px",
        6: "0px 3px 5px -1px",
        7: "0px 4px 5px -2px",
        8: "0px 5px 5px -3px",
        9: "0px 5px 6px -3px",
        10: "0px 6px 6px -3px",
        11: "0px 6px 7px -4px",
        12: "0px 7px 8px -4px",
        13: "0px 7px 8px -4px",
        14: "0px 7px 9px -4px",
        15: "0px 8px 9px -5px",
        16: "0px 8px 10px -5px",
        17: "0px 8px 11px -5px",
        18: "0px 9px 11px -5px",
        19: "0px 9px 12px -6px",
        20: "0px 10px 13px -6px",
        21: "0px 10px 13px -6px",
        22: "0px 10px 14px -6px",
        23: "0px 11px 14px -7px",
        24: "0px 11px 15px -7px"
) !default;
$elevation-penumbra-map: (
        0: "0px 0px 0px 0px",
        1: "0px 1px 1px 0px",
        2: "0px 2px 2px 0px",
        3: "0px 3px 4px 0px",
        4: "0px 4px 5px 0px",
        5: "0px 5px 8px 0px",
        6: "0px 6px 10px 0px",
        7: "0px 7px 10px 1px",
        8: "0px 8px 10px 1px",
        9: "0px 9px 12px 1px",
        10: "0px 10px 14px 1px",
        11: "0px 11px 15px 1px",
        12: "0px 12px 17px 2px",
        13: "0px 13px 19px 2px",
        14: "0px 14px 21px 2px",
        15: "0px 15px 22px 2px",
        16: "0px 16px 24px 2px",
        17: "0px 17px 26px 2px",
        18: "0px 18px 28px 2px",
        19: "0px 19px 29px 2px",
        20: "0px 20px 31px 3px",
        21: "0px 21px 33px 3px",
        22: "0px 22px 35px 3px",
        23: "0px 23px 36px 3px",
        24: "0px 24px 38px 3px"
) !default;
$elevation-ambient-map: (
        0: "0px 0px 0px 0px",
        1: "0px 1px 3px 0px",
        2: "0px 1px 5px 0px",
        3: "0px 1px 8px 0px",
        4: "0px 1px 10px 0px",
        5: "0px 1px 14px 0px",
        6: "0px 1px 18px 0px",
        7: "0px 2px 16px 1px",
        8: "0px 3px 14px 2px",
        9: "0px 3px 16px 2px",
        10: "0px 4px 18px 3px",
        11: "0px 4px 20px 3px",
        12: "0px 5px 22px 4px",
        13: "0px 5px 24px 4px",
        14: "0px 5px 26px 4px",
        15: "0px 6px 28px 5px",
        16: "0px 6px 30px 5px",
        17: "0px 6px 32px 5px",
        18: "0px 7px 34px 6px",
        19: "0px 7px 36px 6px",
        20: "0px 8px 38px 7px",
        21: "0px 8px 40px 7px",
        22: "0px 8px 42px 7px",
        23: "0px 9px 44px 8px",
        24: "0px 9px 46px 8px"
) !default;

// === Components ===
// Global modifiers classname
$modifier-color-primary: #{'.is-primary'};
$modifier-color-secondary: #{'.is-secondary'};
$modifier-color-success: #{'.is-success'};
$modifier-color-error: #{'.is-error'};
$modifier-color-warn: #{'.is-warn'};
$modifier-color-info: #{'.is-info'};
$modifier-color-light: #{'.is-light'};
$modifier-color-dark: #{'.is-dark'};

// Card
$card-padding: $g-gutter;

// Switch / Checkbox / Radio
$check-color: #555;
$check-label-padding: .1875em 0;
$check-content-padding: .1875em 0 0 .625em;
$check-toggle-size: 1.25em;
$check-toggle-border: .1em solid $check-color;
$check-toggle-shadow: 0 .15em .05em -.2em rgba(#000, .2), 0 .2em .2em 0 rgba(#000, .14), 0 .05em .25em 0 rgba(#000, .12);
$check-transition: .1s ease;
$check-shadow-color: rgba(#000, .1);
$check-shadow-press-color: rgba(#000, .2);
$check-active-color: $color-primary;
$check-active-shadow-color: rgba($check-active-color, .2);
$check-active-shadow-press-color: rgba(darken($check-active-color, 10%), .25);

//
$checkbox-border-radius: .1875rem;
$checkbox-mark-checked-background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M.04.627L.146.52.43.804.323.91zm.177.177L.854.167.96.273.323.91z' fill='%23fff'/%3E%3C/svg%3E");
$checkbox-mark-unchecked-background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath fill='%23fff' d='M.15.4h.7v.2h-.7z'/%3E%3C/svg%3E");

// Button
$btn-base-color: #EEE !default;
$btn-height: 2.25em !default;
$btn-padding: calc(.375em - 1px) 1em !default;
$btn-border: $g-border-width $g-border-style !default;
$btn-border-radius: $g-border-radius !default;
$btn-background-color: $btn-base-color !default;
$btn-hover-background-color: darken($btn-background-color, 5%) !default;
$btn-active-background-color: darken($btn-background-color, 10%) !default;
$btn-font-color: $g-font-color !default;
$btn-font-size: 1rem !default;
$btn-font-weight: 600 !default;
$btn-line-height: 1.5 !default;
$btn-icon-margin: .375em !default;
$btn-icon-font-size: 1.125em !default;
$btn-disabled-background-color: $color-disabled !default;
$btn-disabled-font-color: darken($color-disabled, 10%) !default;
$btn-modifier-transparent: #{'.is-transparent'};
$btn-modifier-bordered: #{'.is-bordered'};
$btn-modifier-elevated: #{'.is-elevated'};
$btn-modifier-block: #{'.is-block'};
$btn-modifier-small: #{'.is-small'};
$btn-modifier-medium: #{'.is-medium'};
$btn-modifier-large: #{'.is-large'};

// Icon button
$icon-btn-font-size: 1.5rem;
$icon-btn-default-size: 1.75em;

// Form input
$form-input-state-focused: #{'.is-focused'};
$form-input-state-error: #{'.has-error'};
$form-input-state-success: #{'.has-success'};
$form-input-state-readonly: #{'.is-readonly'};
$form-input-state-disabled: #{'.is-disabled'};

$form-input-height: calc(1.5em + .875rem) !default;
$form-input-padding: .375rem .75rem !default;
$form-input-background-color: #FFFFFF !default;
$form-input-placeholder-color: #757575 !default;
$form-input-border-radius: $g-border-radius !default;
$form-input-border: $g-border !default;
$form-input-font-color: $g-font-color !default;
$form-input-active-color: $color-primary !default;
$form-input-disabled-background-color: #E7E7E7 !default;
$form-input-error-color: $color-error;
$form-input-success-color: $color-success;

// Text input
$text-input-icon-color: $g-font-color !default;
$text-input-icon-size: 1.5rem !default;
$text-input-icon-gutter: .625rem !default;
$text-input-icon-opacity: .7 !default;
$text-input-icon-active-opacity: 1 !default;