// 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.

// - Global
// - Alerts
// - Badge
// - Button
// - Card
// - Datagrid
// - Dropdown
// - Form, Input, Checkbox, Radio, Toggle
// - Header
// - Label
// - Login
// - Modal
// - Nav
// - Table
// - Progress Bars
// - Signpost
// - Spinner
// - Stack View
// - Table
// - Tabs
// - Tooltip
// - Tree View
// - Typography
// - Vertical Nav
// - Wizard

/*********
 * Global variables will have an effect on or in multiple Clarity components.
 * Where possible, there is a list files affected by the variable.
 */

/*********
 * $clr-global-app-background
 * Change the background for the clarity application.
 * Usage: clarity-root/src/clr-angular/layout/main-container/_layout.clarity.scss
 * Affects:
 * - $clr-login-background-color
 * - $clr-stack-view-bg-color
 * - $clr-stack-view-stack-block-label-and-content-bg-color
 */
$clr-global-app-background: #1b2a32;

/*********
 * $clr-global-selection-color
 * Components that have a selected (or active) state use this to change the background-color when an item or element
 * is in the active state.
 * Usages:
 * - _layout.clarity.scss
 * - _datagrid.clarity.scss
 * - _sidenav.clarity.scss
 *
 * Component's with variables affected in the dark theme (this file)
 * - Stack View
 * - Tree View
 * - Dropdown
 */
$clr-global-selection-color: #324f61;

/*********
 * $clr-global-hover-bg-color
 * Components or elements that can be hovered will have this color applied to their background-color.
 * Component's with variables affected in the dark theme (this file)
 * - Dropdown
 * - Tree View
 */
$clr-global-hover-bg-color: #29414e;

/*********
 * The close class is a utility class that can be applied to elements with a clr-icon thats used for closing something.
 * There are two variables that control the normal and hovered states.
 * Usages:
 * - _close.clarity.scss
 *
 * Component's with variables affected in the dark theme (this file)
 * - ??
 */
$close-color--normal: #c3ced4;
$close-color--hover: $clr-white;
// END close

/*********
 * Name: Link (and link state colors)
 * Description the color for links and the active, hovered and visited state
 * Usages: ./_reboot.clarity.scss
 */
$clr-link-active-color: #49afd9;
$clr-link-color: #49afd9;
$clr-link-hover-color: #49afd9;
$clr-link-visited-color: #9aa8e2;
// END: Global Clarity Variables

/**********
 * Alerts
 * Alerts are banners that communicate a message with a severity attached to it. They grab the user’s attention to
 * provide critical information needed in context. These variables control the background-color and font color for each
 * of the alert types.
 *
 * There are seven types of alert and we set the background-color and font color for each here.
 * Usage: ./_maps.clarity.scss
 */

$clr-alert-app-disabled-color: #6d7884;
$clr-theme-alert-font-color: #e9ecef;
$clr-theme-app-alert-font-color: $clr-black;

// Info type
$clr-alert-info-bg-color: #0f6082;
$clr-alert-info-font-color: $clr-theme-alert-font-color;
$clr-alert-info-border-color: transparent;
$clr-alert-info-icon-color: $clr-theme-alert-font-color;

// Success type
$clr-alert-success-bg-color: #205522;
$clr-alert-success-font-color: $clr-theme-alert-font-color;
$clr-alert-success-border-color: transparent;
$clr-alert-success-icon-color: $clr-theme-alert-font-color;

// Danger type
$clr-alert-danger-bg-color: #882d31;
$clr-alert-danger-font-color: $clr-theme-alert-font-color;
$clr-alert-danger-border-color: transparent;
$clr-alert-danger-icon-color: $clr-theme-alert-font-color;

// Warning type
$clr-alert-warning-bg-color: #7f6509;
$clr-alert-warning-font-color: $clr-theme-alert-font-color;
$clr-alert-warning-border-color: transparent;
$clr-alert-warning-icon-color: $clr-theme-alert-font-color;

// App Info type
$clr-app-alert-info-bg-color: #49afd9;
$clr-app-alert-info-font-color: $clr-theme-app-alert-font-color;
$clr-app-alert-info-border-color: transparent;
$clr-app-alert-info-icon-color: $clr-theme-app-alert-font-color;

// App warning type
$clr-app-alert-warning-bg-color: #fdd006;
$clr-app-alert-warning-icon-color: $clr-theme-app-alert-font-color;
$clr-app-alert-warning-font-color: $clr-theme-app-alert-font-color;
$clr-app-alert-warning-border-color: transparent;

// App danger type
$clr-app-alert-danger-bg-color: #f54f47;
$clr-app-alert-danger-icon-color: $clr-theme-app-alert-font-color;
$clr-app-alert-danger-font-color: $clr-theme-app-alert-font-color;
$clr-app-alert-danger-border-color: transparent;

// NOTE: Alerts sometimes have buttons in them.
$clr-alert-action-color: $clr-white;         // Used for dropdowns on the right side of an alert
$clr-alert-action-active-color: $clr-white;  // Alert dropdowns when they are clicked on
$clr-app-alert-close-icon-color: $clr-black; // Colors for the 'X' close btn in global alerts
/**********
 * END: Alerts
 */

/*****************
 * Badge
 * Badges provide a method to highlight a count of an element either next to it or inside the element itself.
 * Here you can set the background-color and font color(s) for the various badge types.
 * There are five color options and four status types a Clarity label may have.
 *
 * Usage: ./_maps.clarity.scss
 */
$clr-badge-font-color: $clr-black;
$clr-badge-font-color-contrast: $clr-black;
$clr-badge-info-bg-color: #49afd9;
$clr-badge-info-font-color: $clr-badge-font-color;
$clr-badge-success-bg-color: #62a420;
$clr-badge-success-font-color: $clr-badge-font-color;
$clr-badge-warning-bg-color: #fdd006;
$clr-badge-warning-font-color: $clr-badge-font-color;
$clr-badge-danger-bg-color: #f54f47;
$clr-badge-danger-font-color: $clr-badge-font-color;
$clr-badge-gray-bg-color: #6d7884;
$clr-badge-purple-bg-color: #ad73c8;
$clr-badge-blue-bg-color: #007cbb;
$clr-badge-orange-bg-color: #ff9c32;
$clr-badge-light-blue-bg-color: #89cbdf;
// END: Badge


/*****************
 * Buttons
 * Buttons allow an application to communicate action and direct user intent.
 * Buttons can be: solid, outlined or flat.
 * Solid and outline have four types: primary, success, warning, danger.
 * Buttons can be disabled.
 *
 * For each button type, use these variables to change the following button properties:
 * - background color
 * - border
 * - (font) color
 * - :hover background-color
 * - :hover (font) color
 * - box-shadow color
 *
 *  NOTE: these variables also affect button groups.
 *
 * Usage: ./_maps.clarity.scss
 */

// Use these to control the disabled appearance for all buttons.
$clr-btn-disabled-font-color: $clr-black;
$clr-btn-outline-disabled-font-color: $clr-white;
$clr-btn-disabled-bg-color: $clr-white;
$clr-btn-disabled-border-color: $clr-white;

// Disabled icon color
$clr-button-icon-disabled-color: $clr-btn-outline-disabled-font-color;

// Default button
$clr-btn-default-color: #49afd9; // border-color, color, checked-background-color
$clr-btn-default-bg-color: transparent; // background-color, disabled-background-color
$clr-btn-default-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
$clr-btn-default-hover-color: #57c7ea; // hover-color
$clr-btn-default-box-shadow-color: $clr-black; // active-box-shadow-color
$clr-btn-default-checked-color: $clr-white; // checked-color
$clr-btn-default-disabled-color: $clr-btn-disabled-font-color;                  // disabled-color
$clr-btn-default-disabled-border-color: $clr-btn-disabled-border-color;             // disabled-border-color

// Default button
$clr-btn-default-outline-color: #49afd9; // border-color, color, checked-background-color
$clr-btn-default-outline-bg-color: transparent; // background-color, disabled-background-color
$clr-btn-default-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
$clr-btn-default-outline-hover-color: #57c7ea; // hover-color
$clr-btn-default-outline-box-shadow-color: $clr-black; // active-box-shadow-color
$clr-btn-default-outline-checked-color: $clr-white; // checked-color
$clr-btn-default-outline-disabled-color: $clr-btn-outline-disabled-font-color;                  // disabled-color
$clr-btn-default-outline-disabled-border-color: $clr-btn-disabled-border-color;             // disabled-border-color
$clr-btn-default-outline-checked-color: $clr-btn-disabled-bg-color;

// Primary button
$clr-btn-primary-color: $clr-black; // color, checked-background-color
$clr-btn-primary-bg-color: #49afd9; // background-color, disabled-background-color
$clr-btn-primary-border-color: #49afd9; // border-color
$clr-btn-primary-hover-bg-color: #57c7ea; // hover-background-color
$clr-btn-primary-hover-color: $clr-black; // hover-color
$clr-btn-primary-box-shadow-color: #0065ab; // active-box-shadow-color
$clr-btn-primary-checked-color: $clr-white; // checked-color
$clr-btn-primary-disabled-color: $clr-btn-disabled-font-color;                  // disabled-color
$clr-btn-primary-disabled-bg-color: $clr-btn-disabled-bg-color;                  // disabled-bg-color
$clr-btn-primary-disabled-border-color: $clr-btn-disabled-border-color;             // disabled-border-color

// Success button
$clr-btn-success-color: $clr-black; // color, checked-color,
$clr-btn-success-bg-color: #60b515; // background-color, border-color
$clr-btn-success-hover-bg-color: #85c81a; // hover-background-color
$clr-btn-success-hover-color: $clr-btn-success-color; // hover-color
$clr-btn-success-box-shadow-color: #266900; // active-box-shadow-color
$clr-btn-success-checked-bg-color: $clr-btn-success-hover-bg-color; // checked-background-color
$clr-btn-success-disabled-color: $clr-btn-disabled-font-color;                    // disabled-color
$clr-btn-success-disabled-bg-color: $clr-btn-disabled-bg-color;          // disabled-background-color
$clr-btn-success-disabled-border-color: $clr-btn-disabled-border-color; // disabled-border-color

// Success outline button
$clr-btn-success-outline-color: #60b515; // color
$clr-btn-success-outline-border-color: #60b515; // border-color, checked-background-color
$clr-btn-success-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
$clr-btn-success-outline-hover-color: #85c81a; // hover-color
$clr-btn-success-outline-box-shadow-color: $clr-black; // active-box-shadow-color
$clr-btn-success-outline-checked-color: $clr-white; // checked-color
$clr-btn-success-outline-disabled-color: $clr-btn-outline-disabled-font-color;                   // disabled-color
$clr-btn-success-outline-disabled-bg-color: transparent;                 // disabled-background-color
$clr-btn-success-outline-disabled-border-color: $clr-btn-disabled-border-color;              // disabled-border-color

// Danger button
$clr-btn-danger-color: $clr-black; // color, checked-color,
$clr-btn-danger-bg-color: #f54f47; // background-color, border-color
$clr-btn-danger-hover-bg-color: #ff665f; // hover-background-color
$clr-btn-danger-hover-color: $clr-btn-danger-color; // hover-color
$clr-btn-danger-box-shadow-color: #c92100; // active-box-shadow-color
$clr-btn-danger-checked-bg-color: $reds-dark-midtone; // checked-background-color
$clr-btn-danger-disabled-color: $clr-btn-disabled-font-color;                           // disabled-color,
$clr-btn-danger-disabled-bg-color: $clr-btn-disabled-bg-color;                 // disabled-background-color
$clr-btn-danger-disabled-border-color: $clr-btn-disabled-border-color;  // disabled-border-color

// Danger outline button
$clr-btn-danger-outline-border-color: #f54f47;                  // border-color
$clr-btn-danger-outline-color: #f54f47;                         // color
$clr-btn-danger-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
$clr-btn-danger-outline-hover-color: #ff665f;                   // hover-color
$clr-btn-danger-outline-box-shadow-color: $clr-black;           // active-box-shadow-color
$clr-btn-danger-outline-checked-bg-color: #f54f47;              // checked-background-color
$clr-btn-danger-outline-checked-color: $clr-white;              // checked-color
$clr-btn-danger-outline-disabled-color: $clr-btn-outline-disabled-font-color;                   // disabled-color
$clr-btn-danger-outline-disabled-bg-color: transparent;                 // disabled-background-color
$clr-btn-danger-outline-disabled-border-color: $clr-btn-disabled-border-color;              // disabled-border-color


// Link button
$clr-btn-link-color: #49AFD9;         // color
$clr-btn-link-hover-color: #57C7EA;   // hover-color
$clr-btn-link-checked-color: #49AFD9; // checked-color
$clr-btn-link-disabled-color: $clr-btn-outline-disabled-font-color;  // disabled-color

// Inverse button
$clr-btn-inverse-border-color: $clr-black; // border-color
$clr-btn-inverse-bg-color: transparent; // background-color
$clr-btn-inverse-color: $clr-black; // color
$clr-btn-inverse-hover-bg-color: rgba(0,0,0,.1); // hover-background-color
$clr-btn-inverse-hover-color: $clr-black; // hover-color
$clr-btn-inverse-box-shadow-color: #a9b6be; // active-box-shadow-color
$clr-btn-inverse-checked-bg-color: rgba($clr-white, 0.15); // checked-background-color
$clr-btn-inverse-checked-color: $clr-white; // checked-color
$clr-btn-inverse-disabled-color: $clr-btn-outline-disabled-font-color;   // disabled-color
$clr-btn-inverse-disabled-border-color: $clr-btn-disabled-border-color; // disabled-border-color
// END: Buttons

/**********
 * Card
 * A card presents high-level information and can guide the user toward related actions and details. Use these variables
 * to change the look and feel of your cards.
 *
 * Usage: ../layout/_card.clarity.scss
 */
$clr-card-bg-color: #22343c;
$clr-card-block-color: #adbbc4;
$clr-card-border-color: #0f171c;
$clr-card-title-color: #e9ecef;
$clr-card-box-shadow: 0 3px 0 0 $clr-card-border-color;
$clr-card-border: 1px solid $clr-card-border-color;
$clr-card-divider-color: $clr-card-border-color;
// END: Card

/**********
 * Datagrid
 * Datagrids are for organizing large volumes of data that users can scan, compare, and perform actions on.
 *
 * Usage: ../data/datagrid/_datagrid.clarity.scss
 */
$clr-datagrid-row-hover: #29414e;
$clr-datagrid-row-selected: #324f61;
$clr-datagrid-popover-bg-color: #22343c;
$clr-datagrid-action-toggle: $clr-datagrid-font-color;
$clr-datagrid-popover-border-color: $clr-black;
$clr-datagrid-action-popover-hover-color: $clr-datagrid-row-hover;
$clr-datagrid-loading-background: rgba(0, 0, 0, 0.5);
// END: Datagrid

/*********
 * Dropdown
 * A dropdown menu allows the user to choose an option or action from a contextual list. Use these variables to change
 * the look-n-feel of your dropdowns.
 *
 * Usage: ../popover/dropdown/_dropdown.clarity.scss
 */
$clr-dropdown-active-text-color: $clr-white;
$clr-dropdown-bg-color: #22343c;
$clr-dropdown-text-color: #adbbc4;
$clr-dropdown-item-text-color: #adbbc4;
$clr-dropdown-border-color: $clr-black;
$clr-dropdown-child-border-color: $clr-black;
$clr-dropdown-bg-active-color: $clr-global-selection-color;
$clr-dropdown-bg-hover-color: $clr-global-hover-bg-color;
$clr-dropdown-font-color: #adbbc4;
$clr-dropdown-selection-color: #324f61;
$clr-dropdown-box-shadow: rgba(0, 0, 0, 0.5);
$clr-dropdown-divider-color: $clr-dropdown-border-color;
$clr-dropdown-header-color: #ADBBC4;
// END: Dropdown overrides

/**********
 * Form
 * A form is a structured layout of related input components.
 * There are a variety of variables used to change form elements, including:
 * - Input
 * - Select
 * - Checkbox
 * - Radio
 * - Toggle
 *
 * Usage:
 * - ../forms/_forms.clarity.scss
 * - ../forms/_select.clarity.scss
 * - ../forms/_radio.clarity.scss
 * - ../forms/_checkboxes.clarity.scss
 * - ../button/_toggles.clarity.scss
 */
$clr-input-text-color: #e9ecef;
$clr-select-option-font-color: $clr-black;
$clr-multiselect-option-font-color: $clr-input-text-color;

$clr-textarea-border-color: #000000;
$clr-textarea-bg-color: #17242b;
$clr-textarea-font-color: #c3ced4;
$clr-textarea-bg-color: #17242b;
$clr-textarea-border-color: $clr-black;
$clr-textarea-text-color: #c3ced4;

$clr-checkbox-color: #49afd9; // Changes radio and checkbox bg color
$clr-checkbox-checkmark-color: $clr-black;
$clr-checkbox-disabled-color: $clr-white;
$clr-indeterminate-checkbox-border-color: $clr-checkbox-color; // Sets border and dash color for checkboxes.
$clr-checkbox-disabled-background-color: #8f9ba3;
$clr-checkbox-disabled-font-color: #8f9ba3;
$clr-checkbox-disabled-checkmark-color: #22343c;

$clr-outline-color:  #49afd9;
$clr-form-field-disabled-background-color: #8f9ba3;
$clr-form-field-background-color: $clr-checkbox-color;
$clr-radio-checked-box-shadow: inset 0 0 0 0.25rem $clr-form-field-background-color;
$clr-radio-focused-box-shadow: 0 0 $clr-outline-blur $clr-outline-spread $clr-outline-color;

$clr-radio-disabled-font-color: #8f9ba3; // font color
$clr-radio-disabled-bg-color: #22343c;  // 'dot' color
$clr-radio-disabled-checked-box-shadow: inset 0 0 0 0.25rem #8f9ba3; //background-color around the dot

$clr-form-text-color: $clr-white;
$clr-form-field-border-color: #adbbc4;
$clr-forms-input-invalid-color: #f54f47;
$clr-forms-input-invalid-icon-color: $clr-forms-input-invalid-color;
$clr-form-disabled-background-color: $clr-black;

$clr-multiple-select-background: #22343c;
$clr-multiple-select-border-color: $clr-black;

$clr-toggle-bg-color-off: #e9ecef;
$clr-toggle-bg-color-on: #60b515;
$clr-toggle-handle-bg-color: #1b2a32;
$clr-toggle-handle-color: #1b2a32;
$clr-toggle-disabled-off-bg-color: $clr-toggle-handle-color;
$clr-toggle-disabled-off-border-color: #8f9ba3;
$clr-toggle-disabled-off-bg-color: $clr-toggle-handle-color; // Also sets disabled/on inner part of handle circle.
$clr-toggle-disabled-off-handle-border-color: #8f9ba3;
$clr-toggle-disabled-on-border-color: #8f9ba3;
$clr-toggle-disabled-on-bg-color: #8f9ba3;
$clr-toggle-disabled-on-handle-border-color: $clr-toggle-handle-color;
$clr-toggle-bg-color-off: $clr-white;
$clr-toggle-bg-color-on: #60b515;
$clr-toggle-handle-bg-color: $clr-toggle-handle-color; // main-container bg color (replaced fafafa in light theme)
// END: form

/**********
 * Header
 * Headers provide branding, navigation, search, and access to global application actions such as settings and
 * notifications. There are five header colors in the dark theme.
 *
 * Usage: ../layout/nav/_header.clarity.scss
 * -
 */
$clr-header-bgColor: #404e60;
$clr-header-default-bg-color: $clr-header-bgColor;
$clr-header-1-bg-color: $clr-header-bgColor;
$clr-header-2-bg-color: #165266;
$clr-header-3-bg-color: #1a4c72;
$clr-header-4-bg-color: #5c3552;
$clr-header-5-bg-color: #3e436a;
$clr-header-6-bg-color: #0F171C;
// END Header overrides

/*****************
 * Label
 * Labels show concise metadata in a compact format. Here you can set the background-color and font color(s) for the
 * different types of labels.
 *
 * There are five color options and four status types a Clarity label may have.

 * Usage: ./_maps.clarity.scss
 */
$clr-label-font-color: $clr-white;
$clr-label-font-color-contrast: $clr-black;
$clr-label-bg-hover-color: #565656;
$clr-label-gray-bg-color: #6d7884;
$clr-label-purple-bg-color: #ad73c8;
$clr-label-blue-bg-color: #007cbb;
$clr-label-orange-bg-color: #ff9c32;
$clr-label-light-blue-bg-color: #89cbdf;
$clr-label-info-bg-color: #0f6082;
$clr-label-info-font-color: $clr-label-font-color;
$clr-label-info-border-color: $clr-label-info-bg-color;
$clr-label-success-bg-color: #205522;
$clr-label-success-font-color: $clr-label-font-color;
$clr-label-success-border-color: $clr-label-success-bg-color;
$clr-label-danger-bg-color: #882d31;
$clr-label-danger-font-color: $clr-label-font-color;
$clr-label-danger-border-color: $clr-label-danger-bg-color;
$clr-label-warning-bg-color: #7f6509;
$clr-label-warning-font-color: $clr-label-font-color;
$clr-label-warning-border-color: $clr-label-warning-bg-color;
// END: Labels

/********
 * Login
 * The login page is a predefined form for applications that require authentication.
 * use these variables to set the background-color and the svg used for the bacground image.
 *
 * Usage:
 * - ../layout/_login.clarity.scss
 * - ../image/_icons.clarity.scss (login background image)
 */
$clr-login-background-color: $clr-global-app-background;
$clr-login-background: "%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%22736px%22%20height%3D%22838px%22%20viewBox%3D%220%200%20736%20838%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3Evector%20art%3C%2Ftitle%3E%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%3Cdefs%3E%3C%2Fdefs%3E%3Cg%20id%3D%22symbols%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22Login%22%20transform%3D%22translate(-504.000000%2C%200.000000)%22%3E%3Cg%20id%3D%22replaceable-image%22%20transform%3D%22translate(504.000000%2C%200.000000)%22%3E%3Cg%20id%3D%22vector-art%22%20transform%3D%22translate(-78.000000%2C%20-82.000000)%22%3E%3Crect%20id%3D%22Rectangle-path%22%20fill%3D%22%2322343E%22%20x%3D%220%22%20y%3D%220.38%22%20width%3D%221127.55%22%20height%3D%22921.62%22%3E%3C%2Frect%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%232F657B%22%20points%3D%220%203.06%200%20599.24%20298.14%20301.43%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23438597%22%20points%3D%220%20408.65%200%20599.24%2095.29%20504.06%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%232F657B%22%20points%3D%22918.21%20921.95%20818.63%20822.3%20718.89%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%233B758E%22%20points%3D%22818.63%20822.3%20298.14%20301.43%200%20599.24%200%20655.02%20266.51%20921.95%20718.89%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23579EB2%22%20points%3D%22512.67%20921.95%2095.29%20504.06%200%20599.24%200%20654.97%20267.06%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23344B57%22%20points%3D%22266.51%20921.95%200%20655.02%200%20921.95%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23A7C9D5%22%20points%3D%221128%200%20799.58%200%201128%20329.83%22%3E%3C%2Fpolygon%3E%3Cpolygon%20id%3D%22Shape%22%20fill%3D%22%23344B57%22%20points%3D%221128%20329.83%20799.58%200%20599.9%200%20298.14%20301.43%20818.63%20822.3%201128%20513.18%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
// END LOGIN

/**********
 * Modal
 * Modals provide information or help a user complete a task.
 *
 * Usage: ../modal/_modal.clarity.scss
 */
$clr-modal-close-color: #adbbc4;
$clr-modal-bg-color: #22343c;
$clr-modal-backdrop-color: hsla(0, 0, 0, 0.85);
// END Modal

/***************
 * Nav
 * A sound navigation layout offers a high degree of discoverability and feedback, letting users know where they are at
 * all times and ensuring they can easily get to where they want to go.
 *
 * The variables in this section control the following navigation components
 * - Responsive nav
 * - Side nav
 * - Sub nav
 *
 * Usage:
 * - ../layout/nav/_responsive-nav.clarity.scss
 * - ../layout/nav/_sidenav-nav.clarity.scss
 * - ../layout/nav/_subnav.clarity.scss
 */
$clr-sliding-panel-width: 15rem;
$clr-sliding-panel-width-sm: 12rem;
$clr-sliding-panel-text-color: clr-getTextColor();
$clr-trigger-position: $clr-sliding-panel-width + 0.5rem;
$clr-trigger-position-sm: $clr-sliding-panel-width-sm + 0.5rem;
$clr-sliding-panel-z-index: map-get($clr-layers, sidepanel);
$clr-sliding-panel-backdrop-z-index: map-get($clr-layers, sidepanel-bg);
$clr-sliding-transition-time: 0.3s;
$clr-transition-style: ease;
$clr-nav-background-color: $clr-light-gray;
$clr-nav-background-color: #1b2a32;
$clr-responsive-nav-hover-bg: $clr-global-selection-color;
$clr-sliding-panel-text-color: $clr-white;

$clr-sidenav-border-color: #152127;
$clr-sidenav-link-hover-color: $clr-global-selection-color;

$clr-subnav-bgColor: #17242b;
$clr-nav-shadow: 0 -1px 0 #485764 inset;
// END Nav

/**************
 * Progress Bars
 * A progress bar is a linear indicator for providing feedback about an ongoing, user-initiated process.
 *
 * Usage: ../progress/progress-bars/_progress-bars./clarity.scss
 */
$clr-progress-defaultBarColor: #49afd9;
$clr-progress-success-color: #60B515;
$clr-progress-danger-color: #F54F47;
$clr-progress-warning-color: $clr-progress-danger-color;
$clr-progress-bgColor: #324650;
// END Progress Bars

/*********
 * Signpost
 * The signpost is a convenient, lightweight way to show contextual help of information without taking the user out of
 * the current context.
 *
 * Usage: ../popover/signpost/signposts.clarity.scss
 */
$clr-signpost-action-color: #e9ecef;
$clr-signpost-action-hover-color: #49afd9;
$clr-signpost-outerBorder: $clr-black;
$clr-signpost-innerBlock: #22343c;
$clr-signpost-content-bg-color: #22343c;
$clr-signpost-content-border-color: $clr-black;
$clr-signpost-outerBorder: $clr-black;
$clr-signpost-innerBlock: #22343c;
$clr-signpost-border-size: 0.5rem;
$clr-signpost-pointer-border: $clr-signpost-border-size solid $clr-signpost-outerBorder;
$clr-signpost-pointer-invisible-border: $clr-signpost-border-size solid transparent;
$clr-signpost-pointer-psuedo-border: $clr-signpost-border-size solid $clr-signpost-innerBlock;

// END Signpost overrides

/*********
 * Spinner
 * A spinner is visual indicator of an ongoing, user-initiated process.
 *
 * Usage: ../progress/spinner/_spinner.clarity.scss
 */
$clr-spinner-color: #49afd9;
$clr-spinner-bg-color: #324650;
$clr-spinner-opacity: 1.0;
// END Spinners

/*********
 * Stack View
 * A stack view displays key/value pairs, which users can expand to show more detail.
 *
 * Usage: ../data/stack-view/_stack-view.clarity.scss
 */
$clr-stack-view-border-color: #566572;
$clr-stack-view-bg-color: $clr-global-app-background;
$clr-stack-view-stack-block-border-bottom: $clr-stack-view-border-color; //border-bottom for stack-view rows (not last)
$clr-stack-view-border-box-color: $clr-stack-view-border-color;
$clr-stack-block-changed-border-top-color: $clr-blue; // TODO: Figure out where this shows in the UI.
$clr-stack-view-stack-block-label-and-content-bg-color: $clr-global-app-background; // stkvw row bg color when not expanded
$clr-stack-view-stack-children-stack-block-border-bottom-color: $clr-stack-view-border-color; // children of an expanded row
$clr-stack-view-stack-children-stack-block-label-and-content-bg-color: #22343c; // children of an expanded row
$clr-stack-view-stack-block-label-text-color: #929ba5;
$clr-stack-view-stack-block-expanded-bg-color: #324f61;
$clr-stack-view-stack-block-expandable-hover: #324f61;
$clr-stack-view-stack-block-content-text-color: #adbbc4;
$clr-stack-view-stack-block-expanded-text-color: $clr-white;
// END: Stack View overrides

/**********
 * Table
 * Use the table styles wherever you need to present static data in a tabular format.
 *
 * Usage:
 * - ../data/_tables.clarity.scss
 * - ../data/datagrid/_datagrid.clarity.scss
 */
$clr-thead-bgcolor: #1b2a32;
$clr-table-bgcolor: #22343c;
$clr-table-font-color: #adbbc4;
$clr-table-border-color: #485764;
$clr-table-header-border-bottom-color: $clr-table-border-color;
$clr-table-footer-border-top-color: $clr-table-border-color;
$clr-tablerow-bordercolor: $clr-table-border-color;
$clr-table-bordercolor: $clr-table-border-color;
$clr-table-borderstyle: $clr-table-borderwidth solid $clr-table-border-color;
// END: Table

/**********
 * Tabs
 * Tabs divide content into separate views which users navigate between.
 *
 * Usage: ../layout/nav/_nav.clarity.scss
 */
$clr-nav-box-shadow-color: #485764;
$clr-nav-active-box-shadow-color: #49afd9;
$clr-nav-link-active-color: $clr-white;
$clr-nav-link-color: #adbbc4;
// END: Tabs

/**********
 * Tooltip
 * A tooltip provides a short description of a UI element.
 *
 * Usage: ../popover/tooltip/_tooltips.clarity.scss
 */
$clr-tooltip-font-color: $clr-black;
$clr-tooltip-background-color: $clr-white;
// END: Tooltip

/**********
 * Tree View
 * A tree is a hierarchical component that shows the visual representation of the parent-child relationship between
 * nodes.
 *
 * Usage: ../data/tree-view/_tree-view.clarity.scss
 */
$clr-tree-node-caret-link-hover-color: $clr-white;
$clr-tree-link-hover-color: $clr-custom-links-hover-color;
$clr-tree-link-hover-color: $clr-global-hover-bg-color;
$clr-tree-link-selection-color: $clr-global-selection-color;
$clr-tree-link-text-color: #adbbc4;
$clr-tree-node-caret-color: #adbbc4;
// END Tree View variables

/**********
 * Typography
 * Clarity uses the geometric sans-serif font, Metropolis.
 *
 * Usage:
 * - ../typography/_typography.clarity.scss
 * - ../data/datagrid/_datagrid.clarity.scss
 */
$clr-app-font-color-primary: #e9ecef;
$clr-app-font-color-secondary: #adbbc4;

$clr-h1-color: $clr-app-font-color-primary;
$clr-h2-color: $clr-app-font-color-primary;
$clr-h3-color: $clr-app-font-color-primary;
$clr-h4-color: $clr-app-font-color-primary;
$clr-h5-color: $clr-app-font-color-primary;
$clr-h6-color: $clr-app-font-color-secondary;

$clr-p1-color: $clr-app-font-color-secondary;
$clr-p2-color: $clr-app-font-color-secondary;
$clr-p3-color: $clr-app-font-color-secondary;
$clr-p4-color: $clr-app-font-color-primary;
$clr-p5-color: $clr-app-font-color-primary;
$clr-p6-color: $clr-app-font-color-primary;
$clr-p7-color: $clr-app-font-color-primary;
$clr-p8-color: $clr-app-font-color-primary;

/**********
 * Vertical Nav
 * This is a vertically-aligned navigational component.
 *
 * Usage: ../layout/vertical-nav/_vertical-nav.clarity.scss
 */
$clr-vertical-nav-item-height: 1.5rem;
$clr-vertical-nav-item-color: #adbbc4;
$clr-vertical-nav-item-active-color: $clr-white;
$clr-vertical-nav-bg-color: #17242b;
$clr-vertical-nav-hover-bg-color: $clr-global-selection-color;
$clr-vertical-nav-icon-active-color: $clr-white;
$clr-vertical-nav-toggle-icon-color: #adbbc4;
// END Vertical Nav

/**********
 * Wizard
 * Wizards provide a way to go through a sequence of steps that form an end to end workflow..
 *
 * Usage: ../wizard/_wizard.clarity.scss
 */
$clr-wizard-sidenav-bgcolor: #1b2a32;
$clr-wizard-sidenav-text--active: $clr-white;
$clr-wizard-stepnav-active-bgcolor: #324f61;
$clr-wizard-stepnav-border-color: #3c4950;
$clr-wizard-stepnav-border-color--active: $clr-green;
$clr-wizard-step-nav-border-color: #152127;
$clr-wizard-sidenav-text: #adbbc4;
$clr-wizard-title-text: #e9ecef;
$clr-wizard-main-textColor: #adbbc4;
$clr-wizard-ghost-1: #1f2f36;
$clr-wizard-ghost-2: #1b2a30 ;
$clr-wizard-ghost-last: #bbb;
// END: Wizard