@use "typography" as typo-vars;

// Accordion
$accordion-button-background-color-default: 'gray-100' !default;
$accordion-button-background-color-hover:   'gray-200' !default;
$accordion-button-open-border:              'low-contrast' !default;
$accordion-button-open-background-color:    'gray-100' !default; 
$accordion-button-icon-size:                5 !default;
$accordion-button-color-default:            'black' !default;
$accordion-button-color-hover:              'black' !default;
$accordion-button-error-border-width:       4px !default;
$accordion-button-error-border-color:       "error" !default;
$accordion-content-border:                  'high-contrast' !default;
$accordion-content-background-color:        'gray-100' !default;
$accordion-content-color:                   'black' !default;

// Alert
$alert-success-background-color:    "success-light" !default;
$alert-warning-background-color:    "warning-light" !default;
$alert-error-background-color:      "error-light" !default;
$alert-info-background-color:       'info-light' !default;
$alert-success-border-color:        'success' !default;
$alert-warning-border-color:        'warning' !default;
$alert-error-border-color:          'error' !default;
$alert-info-border-color:           'info' !default;
$alert-border-color:                "gray-400" !default;
$alert-background-color:            'gray-100' !default;
$alert-padding:                     4 !default;
$alert-border-size:                 3 !default;
$alert-icon-size:                   24px !default;
$alert-text-color:                  'black' !default;
$alert-heading-fontsize:            typo-vars.$typography-base-font-size !default;
$alert-heading-lineheight:          1.5 !default;
$alert-heading-color:               $alert-text-color !default;
$alert-close-text-color:            $alert-text-color !default;

// Back-to-top
$back-to-top-button-background:     'white' !default;
$back-to-top-button-border-color:   'gray-500' !default;
$back-to-top-button-color:          'black' !default;

$back-to-top-hover-border-color:       'gray-600' !default;
$back-to-top-hover-background-color:   'gray-100' !default;
$back-to-top-hover-color:              'black' !default;

$back-to-top-active-border-color:      'gray-600' !default;
$back-to-top-active-background-color:  'gray-200' !default;
$back-to-top-active-color:             'black' !default;

// Badge
$badge-font-weight:                 "normal" !default;
$badge-default-text-color:          'white' !default;
$badge-default-background-color:    'gray-600' !default;
$badge-font-size:                   typo-vars.$typography-body-text-font-size !default;
$badge-line-height:                 typo-vars.$typography-body-text-line-height !default;
$badge-info-text-color:             'black' !default;
$badge-success-text-color:          'black' !default;
$badge-warning-text-color:          'black' !default;
$badge-error-text-color:            'black' !default;
$badge-info-background-color:       'info-light' !default;
$badge-success-background-color:    "success-light" !default;
$badge-warning-background-color:    "warning-light" !default;
$badge-error-background-color:      "error-light" !default;

// Button
$button-disabled-opacity:   0.25 !default;
$button-disabled-cursor:    not-allowed !default;

// Button: Primary
$button-primary-default-border-color:       'primary' !default;
$button-primary-default-background-color:   'primary' !default;
$button-primary-default-color:              'white' !default;

$button-primary-hover-border-color:         'primary-dark' !default;
$button-primary-hover-background-color:     'primary-dark' !default;
$button-primary-hover-color:                'white' !default;

$button-primary-active-border-color:        'black' !default;
$button-primary-active-background-color:    'black' !default;
$button-primary-active-color:               $button-primary-default-color !default;

// Button: Secondary
$button-secondary-default-border-color:         'primary' !default;
$button-secondary-default-background-color:     'white' !default;
$button-secondary-default-color:                'black' !default;

$button-secondary-hover-border-color:           'gray-600' !default;
$button-secondary-hover-background-color:       'gray-100' !default;
$button-secondary-hover-color:                  'black' !default;

$button-secondary-active-border-color:          'gray-600' !default;
$button-secondary-active-background-color:      'gray-200' !default;
$button-secondary-active-color:                 'black' !default;

// Button: Tertiary
$button-tertiary-default-border-color:          'gray-100' !default;
$button-tertiary-default-background-color:      'gray-100' !default;
$button-tertiary-default-color:                 'black' !default;

$button-tertiary-hover-border-color:            'gray-100' !default;
$button-tertiary-hover-background-color:        'gray-100' !default;
$button-tertiary-hover-color:                   'black' !default;

$button-tertiary-active-border-color:           'gray-200' !default;
$button-tertiary-active-background-color:       'gray-200' !default;
$button-tertiary-active-color:                  'black' !default;

// Button: Warning
$button-warning-default-border-color:       'red-700' !default;
$button-warning-default-background-color:   'red-700' !default;
$button-warning-default-color:              'white' !default;

$button-warning-hover-border-color:         'red-700' !default;
$button-warning-hover-background-color:     'red-700' !default;
$button-warning-hover-color:                'white' !default;

$button-warning-active-border-color:        'black' !default;
$button-warning-active-background-color:    'black' !default;
$button-warning-active-color:               'white' !default;

// Button: Icon
$button-icon-default-border-color:       'transparent' !default;
$button-icon-default-background-color:   'transparent' !default;
$button-icon-default-color:              'black' !default;

$button-icon-hover-border-color:         'gray-100' !default;
$button-icon-hover-background-color:     'gray-100' !default;
$button-icon-hover-color:                'black' !default;

$button-icon-active-border-color:        'gray-200' !default;
$button-icon-active-background-color:    'gray-200' !default;
$button-icon-active-color:               'black' !default;

// Button: Print
$button-print-border-color:         'gray-500' !default;
$button-print-background-color:     'white' !default;
$button-print-color:                'black' !default;

// Search field
$button-search-text-color:                  'ink' !default;
$button-search-default-background-color:    'white' !default;
$button-search-hover-background-color:      'gray-100' !default;
$button-search-active-background-color:     'gray-200' !default;
$search-background-color:                   'white';

// Breadcrumbs
$breadcrumbs-font-size:                     typo-vars.$typography-small-text-font-size !default;
$breadcrumbs-text-color:                    'black' !default;
$breadcrumbs-chevron-size:                  7px !default;
$breadcrumbs-chevron-border-width:          1px !default;
$breadcrumbs-chevron-border-colour:         'ink-light' !default;
$breadcrumbs-chevron-altitude-calculated:   5.655px !default;

// Cards
$cards-border:                      'high-contrast' !default;
$cards-background-color:            'white' !default;
$cards-header-background-color:     $cards-background-color !default;
$cards-text-background-color:       $cards-background-color !default;
$cards-content-background-color:    $cards-background-color !default;
$cards-action-background-color:     $cards-background-color !default;
$cards-text-color:                  'gray-600' !default;
$cards-heading-color:               'black' !default;
$cards-heading-large-color:         'black' !default;
$cards-sub-heading-color:           'ink-light' !default;

// Cookie Message
$cookie-message-background-color:   'white' !default;
$cookie-message-border:             'high-contrast' !default;
$cookie-message-text-color:         'black' !default;

// Datepicker
$datepicker-background-color:                           'white' !default;
$datepicker-header-background-color:                    'gray-100' !default;
$datepicker-header-text-color:                          'black' !default;
$datepicker-button-icon:                                'calendar-month' !default;
$datepicker-previous-next-month-background-color:       'gray-100' !default;
$datepicker-previous-next-month-background-color-hover: 'gray-200' !default;
$datepicker-previous-next-month-text-color:             'black' !default;
$datepicker-border:                                     'high-contrast' !default;
$datepicker-table-border:                               'low-contrast' !default;
$datepicker-date-selected-background-color:             'gray-600' !default;
$datepicker-date-selected-text-color:                   'white' !default;
$datepicker-date-within-range-background-color:         'gray-500' !default;
$datepicker-date-within-range-text-color:               'white' !default;

$datepicker-month-selected-text-color:                  'ink' !default;
$datepicker-year-selected-text-color:                   'ink' !default;

// Detail
$details-panel-border-width:    4px;
$details-panel-border-color:    'gray-300' !default;

// Footer
$footer-border:             'high-contrast' !default;
$footer-background-color:   'white' !default;
$footer-text-color:         'black' !default;
$footer-logo:               'logo-placeholder.png' !default;

// Form input
$input-prefix-suffix-background-color:  'gray-100' !default;
$input-border:                          'high-contrast' !default;
$input-font-size:                       typo-vars.$typography-body-text-font-size !default;
$input-line-height:                     typo-vars.$typography-body-text-line-height !default;
$input-text-color:                      'ink' !default;
$input-placeholder-color:               'gray-500' !default;
$input-disabled-background-color:       'transparent' !default;
$input-disabled-border-color:           'gray-200' !default;
$input-disabled-text-color:             'gray-500' !default;

$input-border-width-feedback:               2px !default;
$input-border-color-feedback-error:         'error' !default;
$input-border-color-feedback-success:       'error' !default;
$form-hint-text-color:                      'ink-light' !default;
$form-hint-font-size:                       typo-vars.$typography-body-text-font-size !default;
$form-hint-line-height:                     typo-vars.$typography-body-text-line-height !default;
$form-hint-letter-spacing:                  typo-vars.$typography-body-text-letter-spacing !default;
$form-hint-font-weight:                     typo-vars.$typography-body-text-font-weight !default;
$form-group-error-border-width:             4px !default;
$form-group-error-border-color:             'error' !default;
$input-text-character-limit-exceeded-color: 'red-700' !default;

// Radio buttons and checkboxes
$input-checkbox-radio-size:                         5 !default;
$input-checkbox-radio-label-distance:               3 !default;
$input-checkbox-radio-label-color:                  'ink' !default;
$input-checkbox-radio-label-font-weight:            'normal' !default;
$input-checkbox-radio-unchecked-background-color:   'white' !default;
$input-checkbox-radio-unchecked-border-color:       'black' !default;
$input-checkbox-radio-content-border-color:         'gray-300' !default;

$input-checkbox-checkmark-size:                 5 !default;
$input-checkbox-checked-background-color:       'black' !default;
$input-checkbox-checked-background-color-print: 'white' !default;
$input-checkbox-checked-border-color:           'black' !default;
$input-checkbox-checked-image:                  'check-white' !default;
$input-checkbox-mixed-image:                    'minus-white' !default;

$input-radio-dot-color:                 'black' !default;
$input-radio-dot-size:                  305 !default;
$input-radio-checked-background-color:  'white' !default;
$input-radio-checked-border-color:      'black' !default;

$input-checkbox-radio-disabled-label-color:                 'gray-500' !default;
$input-checkbox-radio-disabled-unchecked-background-color:  'gray-100' !default;
$input-checkbox-radio-disabled-unchecked-border-color:      'gray-300' !default;
$input-checkbox-disabled-checked-background-color:          'gray-300' !default;
$input-checkbox-disabled-checked-border-color:              'gray-300' !default;
$input-checkbox-disabled-checkmark-color:                   'gray-100' !default;
$input-radio-disabled-checked-background-color:             'gray-100' !default;
$input-radio-disabled-checked-border-color:                 'gray-300' !default;
$input-radio-disabled-dot-color:                            'gray-300' !default;

// Input: Range
$input-range-track-default-background-color:    'gray-300' !default;
$input-range-track-default-border:              $input-border !default;
$input-range-thumb-default-border:              $input-border !default;
$input-range-thumb-default-background-color:    'gray-100' !default;

// Select
$select-background-color:   'white';
$select-border:             $input-border !default;
$select-text-color:         $input-text-color !default;
$select-font-size:          $input-font-size !default;
$select-line-height:        $input-line-height !default;

// Header
$header-border:                                 'low-contrast' !default;
$header-last-border:                            'high-contrast' !default;
$header-portal-mobile-border:                   'high-contrast' !default;
$header-solution-mobile-background-color:       'white' !default;
$header-navigation-top-mobile-background-color: 'white' !default;
$header-log-on-off-button-background-color:     'white' !default;

$solution-header-border-bottom:             'high-contrast' !default;
$header-portal-background-color:            'white' !default;
$header-portal-border:                      'low-contrast' !default;
$header-portal-logo:                        'logo-header-placeholder.png' !default;
$header-portal-logo-width:                  100% !default;
$header-portal-logo-height:                 24px !default;
$header-portal-compact-logo-width:          auto !default;
$header-solution-border:                    'low-contrast' !default;
$header-solution-background-color:          'white' !default;
$header-solution-text-color:                'black' !default;
$header-solution-text-size:                 'lg' !default;
$header-solution-line-height:               5 !default;
$header-solution-text-size-desktop:         '4xl' !default;
$header-solution-line-height-desktop:       6 !default;
$header-solution-authority-name:            'gray-600' !default;
$header-solution-authority-name-font-size:  typo-vars.$typography-base-font-size !default;
$header-solution-info-mobile-text-color:    'black' !default;
$header-navigation-background-color:        'white' !default;

// Navigation
$navigation-border-desktop-top-color:       'gray-300' !default;
$navigation-border-top-bottom-color:        'gray-300' !default;
$navigation-link-current-border-color:      'primary' !default;
$navigation-link-border-color:              'gray-300' !default;
$navigation-sublink-border-color:           'gray-200' !default;
$navigation-link-default-color:             'black' !default;
$navigation-link-helptext-color:            'gray-500' !default;
$navigation-link-current-helptext-color:    'gray-600' !default;
$navigation-link-background-color:          'white' !default;
$navigation-link-background-color-hover:    'gray-100' !default;
$navigation-link-background-color-active:   'gray-200' !default;
$navigation-link-current-background-color:  'gray-100' !default;

// HR - horizontal ruler
$hr-border: 'high-contrast' !default;

// Language switcher
$language-switcher-border:              'very-low-contrast' !default;
$language-switcher-text-color:          'black' !default;
$language-switcher-active-text-color:   'black' !default;
$language-switcher-background-color:    'white' !default;

// Modal
$modal-overlay-background-color:    'black-transparent-500' !default;
$modal-background-color:            'white' !default;
$modal-text-color:                  'black' !default;
$modal-header-background-color:     $modal-background-color !default;
$modal-header-text-color:           $modal-text-color !default;
$modal-header-close-color:          $modal-header-text-color !default;
$modal-footer-background-color:     $modal-background-color !default;
$modal-footer-text-color:           $modal-text-color !default;
$modal-body-background-color:       $modal-background-color !default;
$modal-body-text-color:             $modal-text-color !default;

// Overflow Menu
$overflow-menu-arrow-size:                              8px;
$overflow-menu-dropdown-distance:                       8px;
$overflow-menu-button-text-color:                       'ink' !default;
$overflow-menu-button-icon-only-hover-background-color: 'gray-100' !default;
$overflow-menu-content-background-color:                'white' !default;
$overflow-menu-content-border:                          'high-contrast' !default;
$overflow-menu-content-font-size:                       typo-vars.$typography-body-text-font-size !default;
$overflow-menu-content-line-height:                     typo-vars.$typography-body-text-line-height !default;
$overflow-menu-content-text-color:                      'ink' !default;
$overflow-menu-content-link-hover-background-color:     'gray-100' !default;

// Pagination
$pagination-button-arrow-font-size:                 typo-vars.$typography-body-text-font-size !default;
$pagination-button-arrow-background-color:          'transparent' !default;
$pagination-button-arrow-color:                     'black' !default;
$pagination-current-page-background-color:          'gray-600' !default;
$pagination-current-page-background-color-hover:    'gray-600' !default;
$pagination-current-page-border-color:              'gray-600' !default;
$pagination-current-page-color:                     'white' !default;
$pagination-page-background-color:                  'gray-100' !default;
$pagination-page-background-color-hover:            'gray-200' !default;
$pagination-page-background-color-active:           'gray-200' !default;
$pagination-page-color:                             'black' !default;
$table-pagination-page-background-color-hover:      'gray-100' !default;
$table-pagination-page-background-color-active:     'gray-200' !default;

// Side navigation
$sidenav-border-active-color:                       'primary' !default;
$sidenav-border:                                    'high-contrast' !default;
$sidenav-link-border-color:                         'gray-300' !default;
$sidenav-sublink-border-color:                      'gray-200' !default;
$sidenav-link-background-color:                     'white' !default;
$sidenav-link-background-color-hover:               'gray-100' !default;
$sidenav-link-background-color-active:              'gray-200' !default;
$sidenav-link-current-background-color:             'gray-100' !default;
$sidenav-link-font-color:                           'black' !default;
$sidenav-link-default-extra-information-text-color: 'gray-500' !default;
$sidenav-link-current-extra-information-text-color: 'gray-600' !default;
$sidenav-error-background-color:                    "error-light" !default;

// Table
$table-head-background-color:                   'gray-100' !default;
$table-head-font-weight:                        "semibold" !default;
$table-border:                                  'high-contrast' !default;
$table-row-border:                              'low-contrast' !default;
$table-cell-border:                             $table-row-border !default;
$table-font-size:                               typo-vars.$typography-body-text-font-size !default;
$table-text-line-height:                        typo-vars.$typography-body-text-line-height !default;
$table-text-color:                              typo-vars.$typography-body-text-color !default;
$table-row-even-background-color:               'gray-100' !default;
$table-row-odd-background-color:                'white' !default;
$table-selectable-hover-background-color:       'gray-100' !default;
$table-selectable-selected-background-color:    'gray-200' !default;
$table-selectable-help-text-color:              'ink-light' !default;

// Tabs
$tab-inactive-text-color:           'black' !default;
$tab-inactive-background-color:     'gray-100' !default;
$tab-active-text-color:             'white' !default;
$tab-active-text-color-print:       'black' !default;
$tab-active-background-color:       'gray-600' !default;
$tab-active-icon-color:             'white' !default;
$tab-icon-color-print:              'black' !default;
$tab-default-border:                'high-contrast' !default;
$tab-hover-background-color:        'gray-200' !default;

// Tags
$tag-font-size:                 typo-vars.$typography-body-text-font-size !default;
$tag-font-weight:               'medium' !default;
$tag-text-color:                'white' !default;
$tag-default-background-color:  'gray-600' !default;
$tag-hover-background-color:    'gray-500' !default;
$tag-active-background-color:   'black' !default;
$tag-focus-background-color:    'gray-600' !default;
$tag-line-height:               typo-vars.$typography-body-text-line-height !default;
$tag-icon-color:                $tag-text-color !default;

// Toast
$toast-default-background-color:    'white' !default;
$toast-info-background-color:       'info-light' !default;
$toast-success-background-color:    'success-light' !default;
$toast-warning-background-color:    'warning-light' !default;
$toast-error-background-color:      'error-light' !default;
$toast-info-icon:                   'info-white' !default;
$toast-success-icon:                'success-white' !default;
$toast-warning-icon:                'warning' !default;
$toast-error-icon:                  'error-white' !default;
$toast-info-color:                  'info' !default;
$toast-success-color:               'success' !default;
$toast-warning-color:               'warning' !default;
$toast-error-color:                 'error' !default;

// Toggle switch
$toggle-dot-background-color:       'white' !default;
$toggle-off-dot-border:             'high-contrast' !default;
$toggle-on-dot-border-color:        'primary' !default;
$toggle-on-dot-border-color-hover:  'primary-dark' !default;
$toggle-off-background-color:       'gray-100' !default;
$toggle-off-background-color-hover: 'gray-200' !default;
$toggle-off-border:                 'high-contrast' !default;
$toggle-on-background-color:        'primary' !default;
$toggle-on-background-color-hover:  'primary-dark' !default;
$toggle-on-border-color:            'primary' !default;
$toggle-on-border-color-hover:      'primary-dark' !default;
$toggle-label-color:                'ink' !default;

// Tooltip
$tooltip-background-color:  'gray-600' !default;
$tooltip-arrow-color:       'gray-600' !default;
$tooltip-color:             'white' !default;
$tooltip-link-color:        typo-vars.$typography-body-text-color !default;
$tooltip-link-border-width: 1px !default;
$tooltip-link-border-style: dotted !default;
$tooltip-link-border-color: $tooltip-link-color !default;

// Skipnav
$skipnav-background-color:  'white' !default;
$skipnav-text-color:        'ink' !default;

// Spinner
$spinner-animation-color:       'primary' !default;
$spinner-animation-light-color: 'white' !default;
$spinner-animation-background:  'gray-200' !default;
$spinner-box-background:        'white' !default;