// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

/*================================================================================*/
/* Overwrite the default variable assignments in _layers.clarity.scss here:       */
/*================================================================================*/

$clr-layers: null;

/*
    (content: 0,
    select-box: 2,
    dropdown-menu: 1000,
    alert: 1033,
    sidepanel-bg: 1038,
    sidepanel: 1039,
    modal-bg: 1040,
    modal: 1050,
    tooltips: 1070);
*/



/*================================================================================*/
/* Overwrite the default variable assignments in _variables.clarity.scss here:    */
/*================================================================================*/


// Breakpoints
$clr-breakpoints: null; // (small: 544px, medium: 768px, large : 992px, xlarge: 1200px);

// Fonts Options
$clr-font: null; // Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; //Default font stack for Clarity
$clr-altFont: null; // $clr-font; //TODO: TBD. Alternative font for Clarity
$clr-font-base-size: null; // 14;
$clr-font-size: null; // unquote($clr-font-base-size+'px');
$clr-rem-denominator: null; // $clr-font-base-size;
$clr-kerning-lotsatext: null; // normal; // 14px, but a lot of it
$clr-kerning-smalltext: null; // normal; // 14px-12px
$clr-kerning-bigtext: null; // 0.01em; // some types of 16px over dark background
$clr-kerning-tinytext: null; // 0.03em; // 11px and lower

$clr-font-weights: null; // (light: 200, regular: 400, bold: 600);

$clr-baseline: null; // 24px;

// Paragraphs
$clr-typography-smalltext: null; // 13/$clr-rem-denominator*$clr-font-size;
$clr-typography-xsmalltext: null;  // 12/$clr-rem-denominator*$clr-font-size;
$clr-typography-xxsmalltext: null;  // 11/$clr-rem-denominator*$clr-font-size;
$clr-typography-tinytext: null;  // 10/$clr-rem-denominator*$clr-font-size;

// Navigation
$clr-sidenav-width: null; // 18%;
$clr-header-height: null; // $clr-baseline*2.5;
$clr-subnav-height: null; // $clr-baseline*1.5;

//Content Area Paddings
$clr-content-area-padding-top: null; // $clr-baseline*1;
$clr-content-area-padding-right: null; // $clr-baseline*1;
$clr-content-area-padding-bottom: null; // $clr-baseline*1;
$clr-content-area-padding-left: null; // $clr-baseline*1;

// Cards
$clr-card-outer-margin: null; // $clr-baseline*0.75;
$clr-card-inner-margin: null; // $clr-baseline*0.5;

// Modal
$clr-modal-content-padding-top: null; // $clr-baseline*1;
$clr-modal-content-padding-right: null; // $clr-baseline*1;
$clr-modal-content-padding-bottom: null; // $clr-baseline*1;
$clr-modal-content-padding-left: null; // $clr-baseline*1;

//Other Colors
$clr-links-visited-color: null; // #5659b9;
$clr-custom-links-hover-color: null; // $gray-light;
$clr-selection-color: null; // #D9E4EA;

// Misc
$clr-default-borderradius: null; // $clr-baseline*0.125;
$clr-default-borderwidth: null; // 1px

// Buttons
$clr-button-vertical-margin: null; // $clr-baseline*0.25;
$clr-button-horizontal-margin: null; // $clr-baseline*0.5;

// Icons
$clr-icon-dimension-sm: null; // 16/$clr-rem-denominator*$clr-font-size;



/*================================================================================*/
/* Overwrite the default variable assignments in _colors.clarity.scss here:       */
/*================================================================================*/

$clr-white: null; // #fff;
$clr-black: null; // #000;

$clr-near-white: null; // #fafafa;
$clr-light-gray: null; // #eee;
$clr-lighter-midtone-gray: null; // #ddd;
$clr-light-midtone-gray: null; // #ccc;
$clr-dark-midtone-gray: null; // #9a9a9a;
$clr-gray: null; // #747474;
$clr-dark-gray: null; // #565656;
$clr-near-black: null; // #313131;

$clr-blue: null; // #006a91;
$clr-action-blue-lightest: null; // #e1f1f6;
$clr-action-blue-lighter: null; // #89cbdf;
$clr-action-blue-light: null; // #49afd9;
$clr-action-blue-light-midtone: null; // #0094d2;
$clr-action-blue: null; // #007cbb;
$clr-action-blue-dark-midtone: null; // #007cbb;
$clr-action-blue-dark: null; // #004a70;
$clr-action-blue-darker: null; // #003a59;
$clr-action-blue-darkest: null; // #002538;

$clr-action-purple-lightest: null; // #f3ecf7;
$clr-action-purple-lighter: null; // #e7d9f0;
$clr-action-purple-light: null; // #b68cd1;
$clr-action-purple-light-midtone: null; // #9460b8;
$clr-action-purple: null; // #853fb3;
$clr-action-purple-dark-midtone: null; // #853fb3;
$clr-action-purple-dark: null; // #660092;
$clr-action-purple-darker: null; // #50266b;
$clr-action-purple-darkest: null; // #281336;

$clr-red-lightest: null; // #fbf1f2;
$clr-red-lighter: null; // #f5dbd9;
$clr-red-light: null; // #ebafa6;
$clr-red-light-midtone: null; // #e62700;
$clr-red: null; // #c92100;
$clr-red-dark-midtone: null; // #c92100;
$clr-red-dark: null; // #a32100;
$clr-red-darker: null; // #7d2100;
$clr-red-darkest: null; // #642100;

$clr-yellow-lightest: null; // #FFFADC;
$clr-yellow-lighter: null; // #feecb5;
$clr-yellow: null; // #FFDC0B;
$clr-yellow-light-midtone: null; // #eb8d00;
$clr-yellow-dark-midtone: null; // #ce5c00;
$clr-yellow-dark: null; // #c25400;
$clr-yellow-darker: null; // #9e4100;
$clr-yellow-darkest: null; // #642100;

$clr-green-lightest: null; //  #dff0d0;
$clr-green-lighter: null; //  #c6e4ab;
$clr-green: null; //  #60b515;
$clr-green-light-midtone: null; //  #62a420;
$clr-green-dark-midtone: null; //  #318700;
$clr-green-dark: null; //  #266900;
$clr-green-darker: null; //  #1d5100;
$clr-green-darkest: null; //  #0f2900;



/*================================================================================*/
/* Overwrite the default variable assignments in _tooltips.clarity.scss here:     */
/*================================================================================*/

$clr-tooltip-font-color: null; // $clr-white;
$clr-tooltip-background-color: null; // $clr-black;
$clr-tooltip-default-width: null; // 10*$clr-baseline;
$margin-value: null; // $clr-baseline*0.25;
$arrow-height: null; // $clr-baseline*0.25;
$arrow-width: null; // 5/24*$clr-baseline;
$clr-tooltip-adjusted-margin: null; // $margin-value + $arrow-width * 2;




/*================================================================================*/
/* Overwrite the default variable assignments in _tables.clarity.scss here:       */
/*================================================================================*/

// Backgrounds
$clr-table-bgcolor: null; // $clr-white;
$clr-thead-bgcolor: null; // $clr-near-white;

// Borders
$clr-tablerow-bordercolor: null; // $clr-light-gray;
$clr-table-bordercolor: null; // $clr-light-midtone-gray;
$clr-table-borderwidth: null; // 1px;
$clr-table-borderstyle: null; // $clr-table-borderwidth solid $clr-table-bordercolor;

// Etc.
$clr-table-lineheight: null; // 1*$clr-font-size;
$clr-table-cellpadding: null; // $clr-baseline*0.5;
$clr-table-smallpadding: null; // 0.5 * $clr-table-cellpadding;

$clr-table-lineheightPaddingShim: null; // ($clr-baseline*1 - $clr-table-lineheight)/2;
$clr-table-vertpadding: null; // (($clr-table-cellpadding - $clr-table-borderwidth) * 0.5) + $clr-table-lineheightPaddingShim; // have to account for border...

// Border radius of corner cells needs to be slightly less than the table's,
// To make sure they correctly cover the whole area up to the border.
$clr-table-cornercellradius: null; // $clr-default-borderradius - 1;



/*================================================================================*/
/* Overwrite the default variable assignments in _sidenav.clarity.scss here:      */
/*================================================================================*/

$clr-sidenav-border-color: null; // $clr-light-midtone-gray;



/*================================================================================*/
/* Overwrite the default variable assignments in _modal.clarity.scss here:        */
/*================================================================================*/

$clr-modal-sm-width: null; // 12*$clr-baseline;
$clr-modal-md-width: null; // 24*$clr-baseline;
$clr-modal-lg-width: null; // 36*$clr-baseline;
$clr-modal-xl-width: null; // 48*$clr-baseline;



/*================================================================================*/
/* Overwrite the default variable assignments in _login.clarity.scss here:        */
/*================================================================================*/

$clr-login-background-color: null; // $clr-white;
$clr-login-width: null; // 21*$clr-baseline;
$clr-login-icon-size: null; // $clr-icon-dimension-sm;



/*================================================================================*/
/* Overwrite the default variable assignments in _labels.clarity.scss here:        */
/*================================================================================*/

$clr-padding-top-bottom: null; // $clr-baseline*0.125;
$clr-padding-left-right: null; // $clr-baseline*0.5;

$clr-label-colors: null; /* (
    gray: (
        background: $clr-gray,
        font: $clr-white
    ),
    purple: (
        background: $clr-action-purple-light-midtone,
        font: $clr-white
    ),
    blue: (
        background: $clr-action-blue-dark,
        font: $clr-white
    ),
    orange: (
        background: $clr-yellow-light-midtone,
        font: $clr-black
    ),
    light-blue: (
        background: $clr-action-blue-lighter,
        font: $clr-black
    )
); */



/*================================================================================*/
/* Overwrite the default variable assignments in _forms.clarity.scss here:        */
/*================================================================================*/

$clr-form-field-border-color: null; // $clr-dark-midtone-gray;
$clr-form-field-background-color: null; // $clr-action-blue-light-midtone;
$clr-form-disabled-background-color: null; // $clr-light-midtone-gray;
$clr-form-field-disabled-color: null; // $clr-gray;

$clr-checkbox-radio-label-height: null; //$clr-baselineRem_1;
$clr-checkbox-radio-height: null; // $clr-icon-dimension-sm;
$clr-form-icon-dim: null; // $clr-icon-dimension-sm;

$clr-custom-checkbox-radio-top: null; // ($clr-baseline - $clr-checkbox-radio-height) / 2;



/*================================================================================*/
/* Overwrite the default variable assignments in _buttons.clarity.scss here:      */
/*================================================================================*/

$clr-button-horizontal-padding: null; // $clr-baseline*0.5;
$clr-button-height: null; // $clr-baseline*1.5;
$clr-button-height-sm: null; // $clr-baseline;
$clr-button-padding: null; // 0 $clr-button-horizontal-padding;



/*================================================================================*/
/* Overwrite the default variable assignments in _alert.clarity.scss here:        */
/*================================================================================*/

$clr-app-level-alert-color: null; // $clr-white;
$clr-icon-margin-right: null; // $clr-baseline*0.25;

//Regular Alert
$clr-alert-top-margin: null; // $clr-baseline*0.25;
$clr-alert-min-height: null; // $clr-baseline*1.5;
$clr-alert-horizontal-padding: null; // $clr-baseline*0.5;
$clr-alert-top-padding: null; // $clr-baseline*0.125;
$clr-alert-bottom-padding: null; // $clr-baseline*0.375;
$clr-alert-item-top-margin: null; // $clr-alert-bottom-padding - $clr-alert-top-padding;
$clr-alert-item-min-height: null; // $clr-icon-dimension-sm;

//Small Alert
$clr-alert-sm-min-height: null; // $clr-baseline*1;
$clr-alert-sm-horizontal-padding: null; // $clr-baseline*0.25;
$clr-alert-sm-top-padding: null; // 0;
$clr-alert-sm-bottom-padding: null; // $clr-baseline*0.125;
$clr-alert-sm-item-top-margin: null; // $clr-alert-sm-bottom-padding - $clr-alert-sm-top-padding;
$clr-alert-sm-item-min-height: null; // $clr-icon-dimension-sm;

$clr-alert-colors: null;
/* (
        info: (
                background: $clr-action-blue-lightest,
                font: $clr-action-blue-dark,
                border: $clr-action-blue-light
        ),
        success: (
                background: $clr-green-lightest,
                font: $clr-green-dark,
                border: $clr-green
        ),
        warning: (
                background: $clr-yellow-lighter,
                font: $clr-near-black,
                border: $clr-yellow
        ),
        danger: (
                background: $clr-red-lighter,
                font: $clr-red-dark,
                border: $clr-red-light
        ),
        app-info: (
                background: $clr-action-blue,
                font: $clr-app-level-alert-color,
                border: none
        ),
        app-success: (
                background: $clr-green-light-midtone,
                font: $clr-app-level-alert-color,
                border: none
        ),
        app-warning: (
                background: $clr-yellow-dark,
                font: $clr-app-level-alert-color,
                border: none
        ),
        app-danger: (
                background: $clr-red,
                font: $clr-app-level-alert-color,
                border: none
        )
); */