// Copyright (c) 2016-2019 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: hsl(201, 30%, 15%);

/*********
  * $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: hsl(203, 32%, 29%);

/*********
  * $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: hsl(201, 31%, 23%);

/*********
  * 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)
  * - ??
  */
$clr-close-color--normal: hsl(201, 17%, 80%);
$clr-close-color--normal-opacity: 1;
$clr-close-color--hover: hsl(201, 0%, 100%);
$clr-close-color--hover-opacity: 1;
// END close

/*********
  * Name: Popover box-shadow-color
  * Usages: ./_dropdown.clarity.scss
  * Usages: ./_datepicker.clarity.scss
  */
$clr-popover-box-shadow-color: hsla(0, 0%, 0%, 0.5);

/*********
  * 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: hsl(198, 65%, 57%);
$clr-link-color: hsl(198, 65%, 57%);
$clr-link-hover-color: hsl(198, 65%, 57%);
$clr-link-visited-color: hsl(228, 55%, 75%);
// 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.
  */

$clr-theme-alert-font-color: hsl(210, 16%, 93%);
$clr-theme-app-alert-font-color: hsl(0, 0%, 0%);

// Info type
$clr-alert-info-bg-color: hsl(198, 79%, 28%);
$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: hsl(122, 45%, 23%);
$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: hsl(357, 50%, 35%);
$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: hsl(47, 87%, 27%);
$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: hsl(198, 65%, 57%);
$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: hsl(49, 98%, 51%);
$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: hsl(3, 90%, 62%);
$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;

$clr-alert-action-color: hsl(0, 0%, 100%); // Used for dropdowns on the right side of an alert
$clr-alert-action-active-color: hsl(0, 0%, 100%); // Alert dropdowns when they are clicked on
$clr-app-alert-close-icon-color: $clr-close-color--normal; // Colors for the 'X' close btn in global alerts

$clr-alert-close-icon-opacity: 1;
$clr-alert-close-icon-hover-opacity: 1;

// Close icon colors for APP-LEVEL ALERTS
$clr-app-level-alert-color: hsl(0, 0%, 0%);
$clr-app-alert-close-icon-color: hsl(0, 0%, 0%);

/**********
  * 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.
  *
  */
$clr-badge-font-color-light: hsl(0, 0%, 0%);
$clr-badge-font-color-dark: hsl(0, 0%, 0%);
$clr-badge-info-bg-color: hsl(198, 65%, 57%);
$clr-badge-info-color: hsl(0, 0%, 0%);
$clr-badge-success-bg-color: hsl(90, 67%, 38%);
$clr-badge-success-color: hsl(0, 0%, 0%);
$clr-badge-warning-bg-color: hsl(49, 98%, 51%);
$clr-badge-warning-color: hsl(0, 0%, 0%);
$clr-badge-danger-bg-color: hsl(3, 90%, 62%);
$clr-badge-danger-color: hsl(0, 0%, 0%);
$clr-badge-gray-bg-color: hsl(211, 10%, 47%);
$clr-badge-purple-bg-color: hsl(281, 44%, 62%);
$clr-badge-blue-bg-color: hsl(201, 100%, 36%);
$clr-badge-orange-bg-color: hsl(31, 100%, 60%);
$clr-badge-light-blue-bg-color: hsl(194, 57%, 71%);
// 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.
  *
  */

// Use these to control the disabled appearance for all buttons.
$clr-btn-disabled-font-color: hsl(0, 0%, 0%);
$clr-btn-outline-disabled-font-color: hsl(0, 0%, 100%);
$clr-btn-disabled-bg-color: hsl(0, 0%, 100%);
$clr-btn-disabled-border-color: hsl(0, 0%, 100%);

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

// Default button
$clr-btn-default-color: hsl(198, 65%, 57%); // 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: hsl(194, 78%, 63%); // hover-color
$clr-btn-default-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
$clr-btn-default-checked-color: hsl(0, 0%, 100%); // checked-color
$clr-btn-default-checked-bg-color: $clr-btn-default-color;
$clr-btn-default-disabled-color: $clr-btn-outline-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: hsl(198, 65%, 57%); // 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: hsl(194, 78%, 63%); // hover-color
$clr-btn-default-outline-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
$clr-btn-default-outline-checked-color: hsl(0, 0%, 100%); // checked-color
$clr-btn-default-outline-checked-bg-color: $clr-btn-default-outline-color; // 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-disabled-checked-color: $clr-btn-disabled-bg-color;

// Primary button
$clr-btn-primary-color: hsl(0, 0%, 0%); // color, checked-background-color
$clr-btn-primary-bg-color: hsl(198, 65%, 57%); // background-color, disabled-background-color
$clr-btn-primary-border-color: hsl(198, 65%, 57%); // border-color
$clr-btn-primary-hover-bg-color: hsl(194, 78%, 63%); // hover-background-color
$clr-btn-primary-hover-color: hsl(0, 0%, 0%); // hover-color
$clr-btn-primary-box-shadow-color: hsl(205, 100%, 34%); // active-box-shadow-color
$clr-btn-primary-checked-color: hsl(0, 0%, 100%); // 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: hsl(0, 0%, 0%); // color, checked-color,
$clr-btn-success-bg-color: hsl(92, 79%, 40%); // background-color, border-color
$clr-btn-success-hover-bg-color: hsl(83, 77%, 44%); // hover-background-color
$clr-btn-success-hover-color: $clr-btn-success-color; // hover-color
$clr-btn-success-box-shadow-color: hsl(98, 100%, 21%); // 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: hsl(92, 79%, 40%); // color
$clr-btn-success-outline-border-color: hsl(92, 79%, 40%); // 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: hsl(83, 77%, 44%); // hover-color
$clr-btn-success-outline-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
$clr-btn-success-outline-checked-color: hsl(0, 0%, 100%); // 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: hsl(0, 0%, 0%); // color, checked-color,
$clr-btn-danger-bg-color: hsl(3, 90%, 62%); // background-color, border-color
$clr-btn-danger-hover-bg-color: hsl(3, 100%, 69%); // hover-background-color
$clr-btn-danger-hover-color: $clr-btn-danger-color; // hover-color
$clr-btn-danger-box-shadow-color: hsl(10, 100%, 39%); // active-box-shadow-color
$clr-btn-danger-checked-bg-color: hsl(10, 100%, 39%); // 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: hsl(3, 90%, 62%); // border-color
$clr-btn-danger-outline-color: hsl(3, 90%, 62%); // color
$clr-btn-danger-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1); // hover-background-color
$clr-btn-danger-outline-hover-color: hsl(3, 100%, 69%); // hover-color
$clr-btn-danger-outline-box-shadow-color: hsl(0, 0%, 0%); // active-box-shadow-color
$clr-btn-danger-outline-checked-bg-color: hsl(3, 90%, 62%); // checked-background-color
$clr-btn-danger-outline-checked-color: hsl(0, 0%, 100%); // 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: hsl(198, 65%, 57%); // color
$clr-btn-link-hover-color: hsl(194, 78%, 63%); // hover-color
$clr-btn-link-checked-color: hsl(198, 65%, 57%); // checked-color
$clr-btn-link-disabled-color: $clr-btn-outline-disabled-font-color; // disabled-color

// Inverse button
$clr-btn-inverse-border-color: hsl(210, 16%, 93%); // border-color
$clr-btn-inverse-bg-color: transparent; // background-color
$clr-btn-inverse-color: hsl(210, 16%, 93%); // color
$clr-btn-inverse-hover-bg-color: rgba(0, 0, 0, 0.1); // hover-background-color
$clr-btn-inverse-hover-color: hsl(0, 0%, 100%); // hover-color
$clr-btn-inverse-box-shadow-color: hsl(203, 14%, 70%); // active-box-shadow-color
$clr-btn-inverse-checked-bg-color: hsla(0, 0%, 100%, 0.15); // checked-background-color
$clr-btn-inverse-checked-color: hsl(0, 0%, 100%); // 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: hsl(198, 28%, 18%);
$clr-card-border-color: hsl(203, 30%, 8%);
$clr-card-title-color: hsl(210, 16%, 93%);
$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: hsl(201, 31%, 23%);
$clr-datagrid-row-selected: hsl(0, 0%, 100%);
$clr-datagrid-popover-bg-color: hsl(198, 28%, 18%);
$clr-datagrid-action-toggle: hsl(203, 16%, 72%);
$clr-datagrid-pagination-btn-color: hsl(210, 16%, 93%);
$clr-datagrid-pagination-btn-disabled-color: hsl(210, 16%, 93%);
$clr-datagrid-pagination-btn-disabled-opacity: 0.46;
$clr-datagrid-pagination-input-border-color: hsl(208, 16%, 34%);
$clr-datagrid-pagination-input-border-focus-color: hsl(198, 65%, 57%);
$clr-datagrid-popover-border-color: hsl(0, 0%, 0%);
$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: hsl(0, 0%, 100%);
$clr-dropdown-bg-color: hsl(198, 28%, 18%);
$clr-dropdown-text-color: hsl(203, 16%, 72%);
$clr-dropdown-item-text-color: hsl(203, 16%, 72%);
$clr-dropdown-border-color: hsl(0, 0%, 0%);
$clr-dropdown-child-border-color: hsl(0, 0%, 0%);
$clr-dropdown-bg-active-color: $clr-global-selection-color;
$clr-dropdown-bg-hover-color: $clr-global-hover-bg-color;
$clr-dropdown-selection-color: hsl(203, 32%, 29%);
$clr-dropdown-box-shadow: $clr-popover-box-shadow-color;
$clr-dropdown-divider-color: $clr-dropdown-border-color;
$clr-dropdown-header-color: hsl(203, 16%, 72%);
// END: Dropdown overrides

// Datepicker
$clr-calendar-background-color: hsl(198, 28%, 18%);
$clr-calendar-border-color: hsl(0, 0%, 0%);
$clr-datepicker-trigger-color: hsl(198, 65%, 57%);
$clr-datepicker-trigger-hover-color: hsl(194, 78%, 63%);
$clr-calendar-btn-color: hsl(198, 65%, 57%);
$clr-calendar-btn-hover-focus-color: hsl(201, 31%, 23%);
$clr-calendar-active-cell-background-color: hsl(203, 32%, 29%);
$clr-calendar-active-focus-cell-background-color: hsl(203, 32%, 29%);
$clr-calendar-today-date-cell-color: hsl(0, 0%, 100%);
$clr-calendar-active-cell-color: hsl(0, 0%, 100%);

/******
  * Forms: TODO: track down component usages and names
  * A form is a structured layout of related input components.
  * There are a variety of variables used to change form elements, including:
  *
  * Usage:
  * ../forms/styles/_checkbox.clarity.scss
  * ../forms/styles/_containers.clarity.scss
  * ../forms/styles/_file.clarity.scss
  * ../forms/styles/_form.clarity.scss
  * ../forms/styles/_input.clarity.scss
  * ../forms/styles/_input-group.clarity.scss
  * ../forms/styles/_mixings.forms.scss
  * ../forms/styles/radio.clarity.scss
  * ../forms/styles/_select.clarity.scss
  * ../forms/styles/_textarea.clarity.scss
  * ../forms/styles/_variables.clarity.scss
  *
  */

//GENERIC
$clr-forms-label-color: hsl(203, 16%, 72%);
$clr-forms-text-color: hsl(210, 16%, 93%); // No label, no wrapper
$clr-forms-invalid-color: hsl(3, 90%, 62%);
$clr-forms-subtext-color: hsl(0, 0%, 45%);
$clr-forms-subtext-color: hsl(203, 16%, 72%);
$clr-forms-border-color: hsl(203, 16%, 72%);
$clr-forms-focused-color: hsl(198, 65%, 57%); // Vertical no wrapper, no label

// Textarea
$clr-forms-textarea-background-color: hsl(201, 30%, 13%);
$clr-forms-select-multiple-background-color: hsl(198, 28%, 18%);
$clr-forms-select-multiple-border-color: hsl(0, 0%, 0%);

// Select
// TODO: Properly map these to updated dark theme design
// NOTE: The new form selects seemed to be working like the deprecated form selects so I'm leaving
//       these commented out for now.
//$clr-forms-select-hover-background: rgba(221, 221, 221, 0.5); // CAN WE KEY THIS FROM A KNOWN COLOR
//$clr-forms-select-caret-hover-color: $clr-color-neutral-600;
//$clr-forms-select-caret-color: hsl(0, 0%, 60%);
//$clr-forms-select-option-color: $clr-forms-text-color;
//$clr-forms-select-multiple-background-color: hsl(0, 0%, 100%);
//$clr-forms-select-multiple-border-color: $clr-color-neutral-400;
//$clr-forms-select-multiple-option-color: $clr-forms-text-color;

// Checkbox
$clr-forms-checkbox-label-color: hsl(203, 16%, 72%);
$clr-forms-checkbox-background-color: hsl(198, 65%, 57%); // Use color here
$clr-forms-checkbox-checked-shadow: inset 0 0 0 0.25rem $clr-forms-checkbox-background-color;
$clr-forms-checkbox-indeterminate-border-color: hsl(203, 16%, 72%);
$clr-forms-checkbox-mark-color: hsl(0, 0%, 0%);
$clr-forms-checkbox-disabled-background-color: hsl(204, 10%, 60%);
$clr-forms-checkbox-disabled-mark-color: hsl(0, 0%, 0%);

// Radio
$clr-forms-radio-label-color: hsl(203, 16%, 72%);
$clr-forms-radio-selected-shadow: $clr-forms-checkbox-checked-shadow;
$clr-forms-radio-focused-shadow: 0 0 2px 2px $clr-link-active-color;
$clr-forms-radio-disabled-background-color: hsl(0, 0%, 0%);
$clr-forms-radio-disabled-mark-color: $clr-forms-checkbox-disabled-mark-color;
$clr-forms-radio-disabled-shadow: $clr-forms-checkbox-checked-shadow;

/**********
  * 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: hsl(214, 20%, 31%);
$clr-header-default-bg-color: $clr-header-bgColor;
$clr-header-1-bg-color: $clr-header-bgColor;
$clr-header-2-bg-color: hsl(195, 65%, 24%);
$clr-header-3-bg-color: hsl(206, 63%, 27%);
$clr-header-4-bg-color: hsl(315, 27%, 28%);
$clr-header-5-bg-color: hsl(233, 26%, 33%);
$clr-header-6-bg-color: hsl(203, 30%, 8%);
// END Header overrides

/**********
 * Icons
 * Icons by default are presentational only meaning they do not provide any context to screen readers
 *
 * Usage: ./_icons.clarity.scss
 */
$clr-icon-color-success: hsl(92, 79%, 40%);
$clr-icon-color-error: hsl(3, 90%, 62%);
$clr-icon-color-warning: hsl(49, 98%, 51%);
$clr-icon-color-info: hsl(198, 65%, 57%);
$clr-icon-color-inverse: hsl(0, 0%, 100%);
$clr-icon-color-highlight: hsl(198, 65%, 57%);
// END: Icons

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

  */
$clr-label-font-color: hsl(0, 0%, 100%);
$clr-label-font-color-contrast: hsl(0, 0%, 0%);
$clr-label-bg-hover-color: hsl(0, 0%, 34%);
$clr-label-gray-bg-color: hsl(211, 10%, 47%);
$clr-label-purple-bg-color: hsl(281, 44%, 62%);
$clr-label-blue-bg-color: hsl(201, 100%, 36%);
$clr-label-orange-bg-color: hsl(31, 100%, 60%);
$clr-label-light-blue-bg-color: hsl(194, 57%, 71%);
$clr-label-info-bg-color: hsl(198, 79%, 28%);
$clr-label-info-font-color: $clr-label-font-color;
$clr-label-info-border-color: $clr-label-info-bg-color;
$clr-label-success-bg-color: hsl(122, 45%, 23%);
$clr-label-success-font-color: $clr-label-font-color;
$clr-label-success-border-color: $clr-label-success-bg-color;
$clr-label-danger-bg-color: hsl(357, 50%, 35%);
$clr-label-danger-font-color: $clr-label-font-color;
$clr-label-danger-border-color: $clr-label-danger-bg-color;
$clr-label-warning-bg-color: hsl(47, 87%, 27%);
$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: hsl(203, 16%, 72%);
$clr-modal-bg-color: hsl(198, 28%, 18%);
$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: hsl(0, 0%, 34%);
// $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: hsl(0, 0%, 93%);
$clr-nav-background-color: hsl(201, 30%, 15%);
$clr-responsive-nav-hover-bg: $clr-global-selection-color;
$clr-sliding-panel-text-color: hsl(0, 0%, 100%);

$clr-sidenav-border-color: hsl(200, 30%, 12%);
$clr-sidenav-link-hover-color: $clr-global-selection-color;

$clr-subnav-bgColor: hsl(201, 30%, 13%);
$clr-nav-shadow: 0 -1px 0 hsl(208, 16%, 34%) 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: hsl(198, 65%, 57%);
$clr-progress-success-color: hsl(92, 79%, 40%);
$clr-progress-danger-color: hsl(3, 90%, 62%);
$clr-progress-warning-color: $clr-progress-danger-color;
$clr-progress-bgColor: hsl(200, 23%, 25%);
// 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: hsl(210, 16%, 93%);
$clr-signpost-action-hover-color: hsl(198, 65%, 57%);
$clr-signpost-content-bg-color: hsl(198, 28%, 18%);
$clr-signpost-content-border-color: hsl(0, 0%, 0%);
$clr-signpost-border-size: 0.5rem;
$clr-signpost-pointer-border: $clr-signpost-border-size solid $clr-signpost-content-border-color;
$clr-signpost-pointer-invisible-border: $clr-signpost-border-size solid transparent;
$clr-signpost-pointer-psuedo-border: $clr-signpost-border-size solid $clr-signpost-content-bg-color;

// END Signpost overrides

/*********
  * Spinner
  * A spinner is visual indicator of an ongoing, user-initiated process.
  *
  * Usage: ../progress/spinner/_spinner.clarity.scss
  */
$clr-spinner-color: hsl(198, 65%, 57%);
$clr-spinner-bg-color: hsl(200, 23%, 25%);
$clr-spinner-opacity: 1;
// 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: hsl(208, 14%, 39%);
$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: hsl(205, 100%, 34%); // 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: hsl(
  198,
  28%,
  18%
); // children of an expanded row
$clr-stack-view-stack-block-label-text-color: hsl(212, 10%, 61%);
$clr-stack-view-stack-block-expanded-bg-color: hsl(203, 32%, 29%);
$clr-stack-view-stack-block-expandable-hover: hsl(203, 32%, 29%);
$clr-stack-view-stack-block-content-text-color: hsl(203, 16%, 72%);
$clr-stack-view-stack-block-expanded-text-color: hsl(0, 0%, 100%);
$clr-stack-view-stack-block-caret-color: hsl(0, 0%, 60%);
// 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: hsl(201, 30%, 15%);
$clr-table-bgcolor: hsl(198, 28%, 18%);
$clr-table-font-color: hsl(203, 16%, 72%);
$clr-datagrid-default-border-color: hsl(208, 16%, 34%);
$clr-table-header-border-bottom-color: $clr-datagrid-default-border-color;
$clr-table-footer-border-top-color: $clr-datagrid-default-border-color;
$clr-tablerow-bordercolor: $clr-datagrid-default-border-color;
$clr-table-border-color: $clr-datagrid-default-border-color;
$clr-table-bordercolor: $clr-datagrid-default-border-color;
$clr-table-borderstyle: 1px solid $clr-datagrid-default-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: hsl(208, 16%, 34%);
$clr-nav-active-box-shadow-color: hsl(198, 65%, 57%);
$clr-nav-link-active-color: hsl(0, 0%, 100%);
$clr-nav-link-color: hsl(203, 16%, 72%);
// END: Tabs

/**
  * Timeline
  * Use a timeline to show progress on concrete steps with a specific end goal.
 */

// colors
$clr-timeline-line-color: hsl(203, 16%, 72%);
$clr-timeline-step-header-color: hsl(210, 17%, 93%);
$clr-timeline-step-title-color: hsl(203, 16%, 72%); // #565656
$clr-timeline-step-description-color: hsl(203, 16%, 72%); // #565656

$clr-timeline-incomplete-step-color: hsl(210, 17%, 93%);
$clr-timeline-current-step-color: hsl(198, 65%, 57%);
$clr-timeline-success-step-color: hsl(92, 79%, 40%);
$clr-timeline-error-step-color: hsl(3, 90%, 62%);
// END Timeline

/**********
  * Tooltip
  * A tooltip provides a short description of a UI element.
  *
  * Usage: ../popover/tooltip/_tooltips.clarity.scss
  */
$clr-tooltip-color: hsl(0, 0%, 0%);
$clr-tooltip-background-color: hsl(0, 0%, 100%);
// 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: hsl(0, 0%, 100%);
$clr-tree-link-hover-color: hsl(0, 0%, 93%);
$clr-tree-link-hover-color: $clr-global-hover-bg-color;
$clr-tree-link-selection-color: $clr-global-selection-color;
$clr-tree-link-text-color: hsl(203, 16%, 72%);
$clr-tree-node-caret-color: hsl(203, 16%, 72%);
// END Tree View variables

/**********
  * Typography
  * Clarity uses the geometric sans-serif font, Metropolis.
  *
  * Usage:
  * - ../typography/_typography.clarity.scss
  * - ../data/datagrid/_datagrid.clarity.scss
  */
$clr-global-font-color: hsl(210, 16%, 93%);
$clr-global-font-color-secondary: hsl(203, 16%, 72%);

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

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

/**********
  * 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: hsl(203, 16%, 72%);
$clr-vertical-nav-item-active-color: hsl(0, 0%, 100%);
$clr-vertical-nav-bg-color: hsl(201, 30%, 13%);
$clr-vertical-nav-active-bg-color: $clr-global-selection-color;
$clr-vertical-nav-hover-bg-color: $clr-global-hover-bg-color;
$clr-vertical-nav-icon-active-color: hsl(0, 0%, 100%);
$clr-vertical-nav-toggle-icon-color: hsl(203, 16%, 72%);
// 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: hsl(201, 30%, 15%);
$clr-wizard-sidenav-text--active: hsl(0, 0%, 100%);
$clr-wizard-stepnav-active-bgcolor: hsl(203, 32%, 29%);
$clr-wizard-stepnav-border-color: hsl(201, 14%, 27%);
$clr-wizard-stepnav-border-color--active: hsl(92, 79%, 40%);
$clr-wizard-step-nav-border-color: hsl(200, 30%, 12%);
$clr-wizard-sidenav-text: hsl(203, 16%, 72%);
$clr-wizard-title-text: hsl(210, 16%, 93%);
$clr-wizard-main-textColor: hsl(203, 16%, 72%);
// END: Wizard

@import '../accordion/_variables.accordion.dark';