/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

 /* =====================================================
    COMPONENT SHARED STYLES
   ------------------------------------------------------
*/
//** Colors
// # New tokens definition
$component-color-primary-default:                    var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, $blue-primary)); 
$component-color-primary-hover:                      var(--dlt-component-color-interactive-primary-hover, var(--dlt-color-background-interactive-secondary-default, $white)); 
$component-color-primary-active:                     var(--dlt-component-color-interactive-primary-active, var(--dlt-color-background-interactive-primary-active, $blue-27));
$component-color-primary-focus:                      var(--dlt-component-color-interactive-primary-focus, var(--dlt-color-background-interactive-secondary-default, $white));

$component-color-secondary-default:                  var(--dlt-component-color-interactive-secondary-default, var(--dlt-color-background-interactive-secondary-default, $white)); 
$component-color-secondary-hover:                    var(--dlt-component-color-interactive-secondary-hover, var(--dlt-color-background-interactive-primary-default, $blue-primary)); 
$component-color-secondary-active:                   var(--dlt-component-color-interactive-secondary-active, var(--dlt-color-background-interactive-secondary-active, $blue-89));
$component-color-secondary-focus:                    var(--dlt-component-color-interactive-secondary-focus, var(--dlt-color-background-interactive-primary-default, $blue-primary));

$component-color-accent-default:                     var(--dlt-component-color-interactive-accent-default, var(--dlt-color-background-interactive-accent-default, $pink-accent));
$component-color-accent-hover:                       var(--dlt-component-color-interactive-accent-hover, var(--dlt-color-background-interactive-secondary-default, $white));
$component-color-accent-active:                      var(--dlt-component-color-interactive-accent-active, var(--dlt-color-background-interactive-accent-active, $pink-24));
$component-color-accent-focus:                       var(--dlt-component-color-interactive-accent-focus, var(--dlt-color-background-interactive-secondary-default, $white));
$component-color-accent-light:                       var(--dlt-component-color-interactive-accent-light, $card-tiny-icon-active, $pink-94); /* Used for heart icon active from Cards */

$component-color-system-message-success:             var(--dlt-component-color-system-message-success, var(--dlt-color-system-message-success, $success-color)); 
$component-color-system-message-info:                var(--dlt-component-color-system-message-info, var(--dlt-color-system-message-info, $info-color));
$component-color-system-message-warning:             var(--dlt-component-color-system-message-warning, var(--dlt-color-system-message-warning, $warning-color));
$component-color-system-message-error:               var(--dlt-component-color-system-message-error, var(--dlt-color-system-message-error, $error-color));

$component-opacity-disabled:                         var(--dlt-component-opacity-disabled, var(--dlt-opacity-disabled, .5));

$component-color-background-default:                 var(--dlt-component-color-background-default, var(--dlt-color-background-static-primary, $white)); /* Reserved for all the components */
$component-color-background-interactive-primary-default: var(--dlt-component-color-background-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, $blue-primary)); /* Reserved for all the components */
$component-color-background-interactive-primary-active: var(--dlt-component-color-background-interactive-primary-active, var(--dlt-color-background-interactive-primary-active, $blue-primary)); /* Reserved for all the components */
$component-color-background-interactive-secondary-default: var(--dlt-component-color-background-interactive-secondary-default, var(--dlt-color-background-interactive-secondary-default, $white)); /* Reserved for all the components */
$component-color-background-interactive-secondary-active: var(--dlt-component-color-background-interactive-secondary-active, var(--dlt-color-background-interactive-secondary-active, $blue-89)); /* Reserved for all the components */

$component-color-background-interactive-tertiary-default: var(--dlt-component-color-background-interactive-tertiary-default, var(--dlt-color-background-interactive-tertiary-default, #F0F2F4)); /* Reserved for all the components */
$component-color-background-interactive-tertiary-hover: var(--dlt-component-color-background-interactive-tertiary-hover, var(--dlt-color-background-interactive-tertiary-hover, #E7EBEE)); /* Reserved for all the components */
$component-color-background-interactive-tertiary-highlighted: var(--dlt-component-color-background-interactive-tertiary-highlighted, var(--dlt-color-background-interactive-tertiary-highlighted, #C5EDEA)); /* Reserved for all the components */

$component-color-background-static-tertiary:         var(--dlt-component-color-background-dark, var(--dlt-color-background-static-tertiary, $gray-95)); 
$component-color-background-input-hover:             var(--dlt-component-color-background-input-hover, var(--dlt-color-background-interactive-secondary-default, $white));
$component-color-background-input-focus:             var(--dlt-component-color-background-input-active, var(--dlt-color-background-interactive-secondary-default, $white));
$component-color-background-input-default:           var(--dlt-component-color-background-input-default, var(--dlt-color-background-interactive-secondary-default, $white));
$component-color-background-input-group-dropdown:    var(--dlt-component-color-background-input-group-dropdown, var(--dlt-color-background-interactive-add-on, $gray-95));/* Defined for Input group dropdown */
$component-color-background-loaders-default:         var(--dlt-component-color-background-loaders-default, var(--dlt-color-background-static-tertiary, $gray-80)); /* Loaders background */
$component-color-background-loaders-primary:         var(--dlt-component-color-background-loaders-primary, var(--dlt-color-background-static-contrast, $blue-primary)); /* Loaders background primary*/
$component-color-background-loaders-secondary:       var(--dlt-component-color-background-loaders-secondary, var(--dlt-color-global-accent-default, $blue-primary)); /* Loaders background secondary*/
$component-color-background-toggle-knob-default:     var(--dlt-component-color-background-toggle-knob-default, var(--dlt-color-background-interactive-contrast, $gray-50));  /* Toggle switch knob */
$component-color-background-toggle-knob-active:      var(--dlt-component-color-background-toggle-knob-active, var(--dlt-color-background-interactive-primary-default, $blue-primary));  /* Toggle switch knob */
$component-color-background-zebra-light:             var(--dlt-component-color-background-zebra-light, var(--dlt-color-background-static-primary, $white));                           
$component-color-background-zebra-dark:              var(--dlt-component-color-background-zebra-dark, var(--dlt-color-background-static-secondary, $gray-95));                           
$component-color-background-scrollbar-track:         var(--dlt-component-color-background-scrollbar-track, transparent, rgba(0,0,0,0));                                  
$component-color-background-scrollbar-thumb:         var(--dlt-component-color-background-scrollbar-thumb, var(--dlt-color-background-interactive-subtle, $gray-85));
$component-color-background-sliders-track:           var(--dlt-component-color-background-sliders-track, var(--dlt-color-background-interactive-subtle, $gray-85));

$component-color-text-default:                       var(--dlt-component-color-text-default, var(--dlt-color-text-interactive-secondary, $almost-black)); 
$component-color-text-interactive-inverse:           var(--dlt-component-color-text-inverse, var(--dlt-color-text-interactive-inverse, $white));    
$component-color-text-inverse:                       var(--dlt-component-color-text-inverse, var(--dlt-color-text-static-inverse, $white));    
$component-color-text-primary:                       var(--dlt-component-color-text-primary, var(--dlt-color-text-interactive-primary, $blue-primary));    
$component-color-text-accent:                        var(--dlt-component-color-text-accent, var(--dlt-color-text-interactive-accent, $pink-accent));    
$component-color-text-legend:                        var(--dlt-component-color-text-legend, var(--dlt-color-text-static-primary, $almost-black));
$component-color-text-label:                         var(--dlt-component-color-text-label, var(--dlt-color-text-interactive-secondary, $almost-black));
$component-color-text-placeholder:                   var(--dlt-component-color-text-placeholder, var(--dlt-color-text-interactive-subtle, $gray-40));
$component-color-text-input:                         var(--dlt-component-color-text-input, var(--dlt-color-text-interactive-secondary, $almost-black));
$component-color-text-interactive-primary:           var(--dlt-component-color-text-interactive-primary, var(--dlt-color-text-interactive-primary, $blue-primary));
$component-color-text-interactive-secondary:         var(--dlt-component-color-text-interactive-secondary, var(--dlt-color-text-interactive-secondary, $almost-black));
$component-color-text-interactive-muted:             var(--dlt-component-color-text-interactive-muted, var(--dlt-color-text-interactive-subtle, $gray-40));
$component-color-text-static-muted:                  var(--dlt-component-color-text-static-muted, var(--dlt-color-text-static-subtle, $gray-40));
$component-color-text-link-default:                  var(--dlt-component-color-text-link-default, var(--dlt-color-text-interactive-link-default, $blue-primary));  
$component-color-text-link-hover:                    var(--dlt-component-color-text-link-hover, var(--dlt-color-text-interactive-link-default, $blue-primary)); 
$component-color-text-link-active:                   var(--dlt-component-color-text-link-active, var(--dlt-color-text-interactive-link-highlighted, $blue-primary)); 
$component-color-text-link-visited:                  var(--dlt-component-color-text-link-visited, var(--dlt-color-text-interactive-link-highlighted, $blue-primary)); 

$component-color-border-input-default:               var(--dlt-component-color-border-input-default, var(--dlt-color-border-interactive-secondary, $gray-40)); /* For all the form elements */
$component-color-border-input-focus:                 var(--dlt-component-color-border-input-focus, var(--dlt-color-border-interactive-primary, $blue-primary));               
$component-color-border-input-hover:                 var(--dlt-component-color-border-input-hover, var(--dlt-color-border-interactive-primary, $gray-40));                           
$component-color-border-separator:                   var(--dlt-component-color-border-separator, var(--dlt-color-border-static-primary, $gray-90));                           
$component-color-border-interactive-contrast:        var(--dlt-component-color-border-interactive-contrast, var(--dlt-color-border-interactive-contrast, $gray-40));                           

$component-color-icon-muted-secondary:               var(--dlt-component-color-icon-muted-secondary, var(--dlt-color-icon-static-subtle, $blue-primary));
$component-color-icon-muted-primary:                 var(--dlt-component-color-icon-muted-primary, var(--dlt-color-icon-interactive-secondary, $component-icon-color));
$component-color-icon-muted-inverse:                 var(--dlt-component-color-icon-muted-inverse, var(--dlt-color-icon-static-inverse, $white));
$component-color-icon-interactive-primary:           var(--dlt-component-color-icon-interactive-primary, var(--dlt-color-icon-interactive-primary, $blue-primary));
$component-color-icon-interactive-primary-highlighted: var(--dlt-component-color-icon-interactive-primary-highlighted, var(--dlt-color-icon-interactive-primary-highlighted, $blue-27));
$component-color-icon-interactive-secondary:         var(--dlt-component-color-icon-interactive-secondary, var(--dlt-color-icon-interactive-secondary, $blue-primary));
$component-color-icon-interactive-inverse:           var(--dlt-component-color-icon-interactive-inverse, var(--dlt-color-icon-interactive-inverse, $white));
$component-color-icon-interactive-accent:            var(--dlt-component-color-icon-interactive-accent, var(--dlt-color-icon-interactive-accent, $pink-accent));
