/* Common vars */
$primary-text-color: #000;

/* Media query sizes */
$XS-max-size: 799px;
$S-min-size: Between 800px;
$S-max-size: Between 1023px;
$M-min-size: 1024px;
$M-max-size: 1439px;
$L-min-size: Between 1440px;
$L-max-size: Between 1919px;
$XL-min-size: 1920px;

/* Scrollbar vars */
$scrollbar-size: 7px;
$scrollbar-track-color: var(--mosaic-neutral-3);
$scrollbar-thumb-color: var(--mosaic-neutral-2);
$scrollbar-thumb-hover-color: var(--mosaic-neutral);
$scrollbar-corner-color: var(--mosaic-neutral-3);

/* Navigation vars */
$header-height: 70px; // Important: if this value is changed, breadcrumb arrow styling need to be adjusted as well.
$header-border-bottom: var(--mosaic-accent);

/* Accordion vars */
$accordion-header-background-color: white;
$accordion-header-text-color: var(--mosaic-accent);
$accordion-item-background-color: white;
$accordion-item-text-color: var(--mosaic-neutral-1);
$accordion-item-hover-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 15%,
  transparent
);
$accordion-item-border: 1px solid var(--mosaic-neutral-2);
$accordion-item-arrow-color: var(--mosaic-secondary);
$accordion-item-arrow-disabled-color: var(--mosaic-neutral);

/* Explorer vars */
$explorer-background-color: #ffffff;
$explorer-header-background-color: white;
$explorer-row-hover-background-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 10%,
  transparent
);
$explorer-action-button-color: var(--mosaic-primary);
$explorer-action-button-color-hover: color-mix(
  in srgb,
  var(--mosaic-primary) 75%,
  transparent
);
$explorer-row-thumbnail-bg-color: var(--mosaic-neutral-3);
$explorer-external-link-color: var(--mosaic-primary);
$explorer-sort-color: white;
$explorer-sort-stroke-color: var(--mosaic-neutral);
$explorer-selected-sort-color: var(--mosaic-secondary);
$explorer-column-label-color: var(--mosaic-accent);
$explorer-column-label-font-size: 12px;
$explorer-list-row-border: 1px solid var(--mosaic-neutral-2);

/* List vars */

$list-paddings: 0px 5px 0px 5px;
$list-tag-background-color: var(--mosaic-neutral-3);
$list-tag-overflow-background-color: var(--mosaic-neutral-1);

/* Filter vars */
$filter-background-color: white;
$filter-background-selected-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 15%,
  transparent
);
$filter-light-font-color: var(--mosaic-neutral-1);
$filter-option-background-color: var(--mosaic-primary);
$filter-context-button-color: var(--mosaic-secondary);
$filter-title-color: var(--mosaic-secondary);
$filter-font-size: 14px;
$filter-width: 330px;
$filter-controller-background-color: var(--mosaic-neutral-3);
$filter-border-color: var(--mosaic-secondary);
$multi-option-checkbox-border: var(--mosaic-secondary);
$multi-option-label-color: var(--mosaic-neutral-1);

/* Details vars */
$details-background-color: #ffffff;

/* Hub vars */
$hub-title-color: var(--mosaic-accent);
$hub-tile-border-color: var(--mosaic-primary);
$hub-tile-color: var(--mosaic-primary);
$hub-tile-stroke-color: var(--mosaic-accent);
$hub-tile-border-hover: var(--mosaic-primary);

/* InfoPanel vars */
$infopanel-background-color: var(--mosaic-neutral-3);
$infopanel-border-color: #ffffff;
$infopanel-title-color: var(--mosaic-accent);
$infopanel-title-font-weight: bold;
$infopanel-subtitle-color: var(--mosaic-neutral-1);
$infopanel-paragraph-color: var(--mosaic-neutral-1);
$infopanel-collapse-icon-color: #ffffff;
$infopanel-collapse-icon-hover-color: var(--mosaic-secondary);

/* LandingPage vars */
$landingpage-title-color: var(--mosaic-accent);
$landingpage-subtitle-color: #8c8b87;
$landingpage-largetile-background-color: var(--mosaic-primary);
$landingpage-largetile-disabled-background-color: #8c8b87;
$landingpage-largetile-color: #fff;
$landingpage-largetile-stroke-color: var(--mosaic-accent);
$landingpage-largetile-hover-background-color: color-mix(
  in oklch,
  var(--mosaic-primary),
  white 10%
);
$landingpage-smalltile-background-color: #ffffff;
$landingpage-smalltile-border-color: var(--mosaic-primary);
$landingpage-smalltile-disabled-background-color: #8c8b87;
$landingpage-smalltile-color: var(--mosaic-primary);
$landingpage-smalltile-stroke-color: var(--mosaic-accent);

/* PageHeader */
$page-header-color: #ffffff;
$page-header-background-color: var(--mosaic-accent);
$page-header-height: 100px;

/* PageHeaderAction */
$page-header-action-color: #ffffff;
$page-header-action-background-color: var(--mosaic-primary);
$page-header-action-tag-background-color: var(--mosaic-neutral-2);
$page-header-action-tag-font-size: 10px;

$page-header-action-confirmation-background-color: var(--mosaic-warning);
$page-header-action-pressed-color: $page-header-action-background-color;
$page-header-action-pressed-background-color: $page-header-action-color;
$page-header-action-icon-color: #ffffff;
$page-header-action-active-background-color: #ffffff;
$page-header-action-context-background-color: var(--mosaic-secondary);

$page-header-action-hover-background-color: color-mix(
  in srgb,
  $page-header-action-background-color 75%,
  white
);
$page-header-action-disabled-color: color-mix(
  in srgb,
  $page-header-action-background-color 50%,
  white
);

$page-header-action-context-hover-background-color: color-mix(
  in srgb,
  $page-header-action-context-background-color 75%,
  white
);
$page-header-action-context-disabled-color: color-mix(
  in srgb,
  $page-header-action-context-background-color 50%,
  white
);

$page-header-action-active-hover-background-color: color-mix(
  in srgb,
  $page-header-action-active-background-color 75%,
  white
);
$page-header-action-disabled-fg-color: color-mix(
  in srgb,
  white 50%,
  transparent
);
$page-header-action-disabled-bg-color: var(--mosaic-neutral);

/* PageHeaderBulkActions */
$page-header-actions-background-color: $page-header-background-color;

/* Form vars */
$width-big: 650px;
$width-small: 320px;
$input-color: var(--mosaic-neutral-1);
$input-placeholder-color: var(--mosaic-neutral);
$input-hover-color: var(--mosaic-secondary);
$input-label-color: var(--mosaic-accent);
$input-border-color: var(--mosaic-neutral-2);
$input-max-width: $width-big;
$label-size: 150px;
$divider-color: var(--mosaic-neutral);
$form-group-title-color: var(--mosaic-neutral);
$form-group-title-alternate-color: var(--mosaic-neutral-1);
$form-group-title-font-size: 18px;
$label-gap: 30px;
$input-disabled-font-color: var(--mosaic-neutral);
$input-disabled-border-color: var(--mosaic-neutral-2);
$input-disabled-background-color: var(--mosaic-neutral-3);
$input-invalid-color: var(--mosaic-error);
$input-invalid-border-color: var(--mosaic-error);
$input-invalid-hover-color: var(--mosaic-error);
$tag-border-color-1: var(--mosaic-neutral-2);
$tag-border-color-2: var(--mosaic-secondary);
$tag-icon-color: var(--mosaic-secondary);
$tag-font-color: var(--mosaic-neutral-1);
$tag-background-color: var(--mosaic-neutral-3);
$tag-enter-color: color-mix(in srgb, var(--mosaic-secondary) 25%, transparent);
$tag-plus-button-bg-color: var(--mosaic-secondary);
$tag-plus-button-hover-stroke-color: var(--mosaic-secondary);
$form-error-color: var(--mosaic-error);
$select-arrow-color: var(--mosaic-secondary);
$select-disabled-arrow-color: var(--mosaic-neutral);
$label-font-size: 16px;
$file-upload-progress: var(--mosaic-secondary);
$file-upload-progress-background: var(--mosaic-neutral-3);
$file-upload-input: var(--mosaic-neutral-2);
$read-only-max-width: $width-big;
$select-max-width: $width-small;
$tags-max-width: $width-small;
$textarea-max-width: $width-big;
$date-picker-max-width: $width-small;
$form-element-min-height: 50px;
$read-only-text-background-color: var(--mosaic-neutral-3);
$select-background-color: white;
$form-indicator-color: var(--mosaic-success);
$radio-hover-stroke-color: var(--mosaic-secondary);
$radio-checked-fill-color: var(--mosaic-secondary);
$toggle-button-stroke-color: var(--mosaic-secondary);
$toggle-button-off-text-color: var(--mosaic-secondary);
$toggle-button-on-bg-color: var(--mosaic-secondary);
$live-suggest-border-color: var(--mosaic-secondary);
$live-suggest-background-selected-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 15%,
  transparent
);
$live-suggest-text-color: var(--mosaic-secondary);

/* Inline Menu */
$inline-menu-button-stroke-color: var(--mosaic-secondary);
$inline-menu-button-hover-bg-color: var(--mosaic-secondary);
$inline-menu-button-selected-bg-color: var(--mosaic-secondary);

/* Date Time Picker*/
$calendar-tile-active: var(--mosaic-secondary);
$calendar-tile-active-hover: color-mix(
  in srgb,
  var(--mosaic-secondary) 20%,
  transparent
);
$calendar-button-stroke-color: var(--mosaic-secondary);
$calendar-title-color: var(--mosaic-accent);
$calendar-container-border-color: var(--mosaic-secondary);
$calendar-container-bg-color: var(--mosaic-secondary);

/* Dynamic Data List */
$dynamic-list-row-bg-color: white;
$dynamic-list-row-hover-bg-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 10%,
  transparent
);
$dynamic-list-row-height: 50px;
$dynamic-list-column-gap: 8px;
$dynamic-list-row-gap: 0px;
$dynamic-list-position-color: var(--mosaic-secondary);
$dynamic-list-row-border: 1px solid var(--mosaic-neutral-2);
$dynamic-list-entry-row-bg-color: var(--mosaic-neutral-3);
$dynamic-list-input-height: 50px;

/* Actions */
$actions-color: #ffffff;
$actions-background-color: var(--mosaic-neutral-2);
$actions-confirmation-color: var(--mosaic-warning);
$actions-navigation-bg-color: var(--mosaic-primary);
$actions-context-bg-color: var(--mosaic-secondary);
$actions-navigation-hover-color: color-mix(
  in srgb,
  var(--mosaic-primary) 75%,
  transparent
);
$actions-context-hover-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 75%,
  transparent
);
$actions-disabled-bg-color: var(--mosaic-neutral);
$actions-disabled-fg-color: color-mix(in srgb, white 50%, transparent);
$actions-border-color: white;

/* Background */
$background: #ccc;
$fallback-image-bg-color: var(--mosaic-neutral-3, #efefef);

/* Modal */
$modal-back-drop-color: rgba(169, 169, 169, 0.75);
$modal-back-drop-color-hidden: rgba(169, 169, 169, 0);
$modal-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);

/* ProgressBar */
$progress-bar-processing-indicator: var(--mosaic-secondary);
$progress-bar-completed-indicator: var(--mosaic-success);
$progress-bar-warning-indicator: var(--mosaic-warning);
$progress-bar-error-indicator: var(--mosaic-error);
$progress-bar-background: var(--mosaic-neutral);
$progress-bar-text-color: white;
$progress-bar-text-font-size: 16px;

/* MessageBar */
$message-bar-text-color: var(--mosaic-neutral-1);
$message-bar-toggle-color: var(--mosaic-secondary);
$message-bar-toggle-open-color: white;
$message-bar-bg-color: white;
$message-bar-error-message-bg-color: color-mix(
  in srgb,
  var(--mosaic-error) 20%,
  transparent
);
$message-bar-info-message-bg-color: var(--mosaic-neutral-3);
$message-bar-success-message-bg-color: color-mix(
  in srgb,
  var(--mosaic-success) 20%,
  transparent
);
$message-bar-warning-message-bg-color: color-mix(
  in srgb,
  var(--mosaic-warning) 20%,
  transparent
);
$message-bar-error-icon-bg-color: var(--mosaic-error);
$message-bar-info-icon-bg-color: var(--mosaic-neutral-1);
$message-bar-success-icon-bg-color: var(--mosaic-success);
$message-bar-warning-icon-bg-color: var(--mosaic-warning);

/* Confirmation */
$confirmation-transition: 100ms;

/* Info Tooltip */
$infotooltip-icon-color: var(--mosaic-neutral);
$infotooltip-background-color: var(--mosaic-neutral-2);
$infotooltip-text-color: var(--mosaic-neutral-1);
$infotooltip-font-size: 16px;

/* Video Player */
$video-player-controls-background: var(--mosaic-neutral-3);
$video-player-controls-text-color: var(--mosaic-neutral-1);

/* Buttons */
$navigation-button-background-color: var(--mosaic-primary);
$navigation-button-background-color-hover: color-mix(
  in srgb,
  var(--mosaic-primary) 90%,
  transparent
);
$navigation-button-stroke-color: white;
$navigation-button-background-active-color: white;
$navigation-button-stroke-active-color: var(--mosaic-primary);
$navigation-button-background-disabled-color: var(--mosaic-neutral);
$active-button-background-color: var(--mosaic-secondary);
$active-button-hover-background-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 90%,
  transparent
);
$active-button-stroke-background-color: white;
$active-button-active-background-color: white;
$active-button-active-stroke-color: var(--mosaic-secondary);
$context-button-border-color: var(--mosaic-secondary);
$context-button-stroke-color: var(--mosaic-secondary);
$context-button-hover-border-color: var(--mosaic-secondary);
$context-button-active-color: var(--mosaic-secondary);
$icon-button-stroke-color: var(--mosaic-secondary);
$icon-button-hover-color: var(--mosaic-secondary);

/* Autocomplete */
$popper-border-color: var(--mosaic-secondary);
$popper-trigger-button-color: var(--mosaic-secondary);
$popper-item-font-size: 14px;
$popper-text-color: var(--mosaic-neutral-1);
$popper-background-selected-color: var(--mosaic-neutral-3);
$popper-item-hover-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 10%,
  transparent
);
$popper-item-selected-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 20%,
  transparent
);

/* Accordion additional vars */
$accordion-header-border-color: color-mix(
  in srgb,
  var(--mosaic-neutral) 85%,
  white
);
$accordion-item-row-background-color: var(--mosaic-neutral-2);
$accordion-item-row-expanded-background-color: var(--mosaic-neutral-3);

/* Button additional vars */
$button-context-disabled-border-color: var(--mosaic-neutral);
$button-context-disabled-stroke-color: var(--mosaic-neutral);
$button-icon-active-stroke-color: var(--mosaic-secondary);
$button-icon-disabled-stroke-color: var(--mosaic-neutral);
$button-active-disabled-background-color: var(--mosaic-neutral);
$composite-button-context-disabled-border-color: var(--mosaic-neutral);
$composite-button-context-disabled-color: var(--mosaic-neutral);
$composite-button-active-color: var(--mosaic-secondary);
$composite-button-active-disabled-background-color: var(--mosaic-neutral);
$text-button-context-disabled-border-color: var(--mosaic-neutral);
$text-button-context-disabled-color: var(--mosaic-neutral);
$text-button-active-color: var(--mosaic-secondary);
$text-button-active-disabled-background-color: var(--mosaic-neutral);

/* DatePicker additional vars */
$datepicker-navigation-button-disabled-bg: var(--mosaic-neutral-3);
$datepicker-neighbor-month-color: var(--mosaic-neutral);
$datepicker-tile-disabled-bg: var(--mosaic-neutral-3);
$datepicker-tile-hover-bg: var(--mosaic-neutral-2);
$datepicker-tile-has-active-bg: var(--mosaic-primary);
$datepicker-tile-has-active-hover-bg: color-mix(
  in srgb,
  var(--mosaic-primary),
  white 30%
);
$datepicker-tile-active-bg: var(--mosaic-accent);
$datepicker-tile-active-hover-bg: var(--mosaic-secondary);
$datepicker-tile-text-color: var(--mosaic-neutral-1);
$datepicker-select-range-hover-bg: var(--mosaic-neutral-2);
$datepicker-neighbor-month-light-color: var(--mosaic-neutral-2);

/* TimePicker additional vars */
$timepicker-inactive-title-color: var(--mosaic-neutral);
$timepicker-item-color: var(--mosaic-neutral-1);
$timepicker-item-active-bg: color-mix(
  in srgb,
  var(--mosaic-secondary) 15%,
  transparent
);
$timepicker-item-selected-bg: var(--mosaic-secondary);
$timepicker-item-selected-border: var(--mosaic-secondary);
$timepicker-item-hover-bg: color-mix(
  in srgb,
  var(--mosaic-secondary) 15%,
  transparent
);
$timepicker-button-stroke-color: var(--mosaic-secondary);
$timepicker-title-color: var(--mosaic-neutral-1);

/* Checkbox additional vars */
$checkbox-warning-border-color: var(--mosaic-warning);
$checkbox-warning-hover-border-color: var(--mosaic-warning);
$checkbox-warning-checked-bg-color: var(--mosaic-warning);

/* CustomTags additional vars */
$custom-tags-disabled-button-stroke-color: color-mix(
  in srgb,
  var(--mosaic-neutral) 50%,
  transparent
);

/* FileUploadControl additional vars */
$file-upload-button-bg-color: var(--mosaic-secondary);
$file-upload-button-hover-bg-color: color-mix(
  in srgb,
  var(--mosaic-secondary) 75%,
  transparent
);
$file-upload-button-disabled-bg-color: var(--mosaic-neutral);

/* Radio additional vars */
$radio-label-color: var(--mosaic-neutral-1);
$radio-disabled-outline-color: var(--mosaic-neutral-3);
$radio-disabled-dot-color: var(--mosaic-neutral-2);
$radio-outline-stroke-color: var(--mosaic-neutral);
$radio-warning-stroke-color: var(--mosaic-warning);

/* ToggleButton additional vars */
$toggle-button-warning-border-color: var(--mosaic-warning);
$toggle-button-warning-hover-shadow-color: var(--mosaic-warning);
$toggle-button-warning-text-color: var(--mosaic-warning);
$toggle-button-warning-bg-color: var(--mosaic-warning);

/* List additional vars */
$list-no-data-text-color: var(--mosaic-neutral-1);
$list-no-data-bg-color: var(--mosaic-neutral-2);
$list-error-text-color: var(--mosaic-error);
$list-error-bg-color: color-mix(in srgb, var(--mosaic-error) 15%, transparent);

/* ListHeader additional vars */
$list-header-border-color: var(--mosaic-neutral-2);
$list-header-resize-handle-border-color: var(--mosaic-neutral-2);

/* ListRow additional vars */
$list-row-disabled-text-color: var(--mosaic-neutral);

/* DynamicDataList additional vars */
$dynamic-list-header-border-color: var(--mosaic-neutral-2);
$dynamic-list-header-resize-border-color: var(--mosaic-neutral-2);
$dynamic-list-row-disabled-drag-icon-color: var(--mosaic-neutral-2);

/* ConfirmDialog additional vars */
$confirm-dialog-body-text-color: var(--mosaic-neutral-1);

/* PageHeader additional vars */
$page-header-subtitle-color: var(--mosaic-neutral);

/* Tab additional vars */
$tab-text-color: var(--mosaic-secondary);
$tab-selected-text-color: var(--mosaic-accent);
$tab-hover-bg-color: var(--mosaic-secondary);
$tab-disabled-text-color: var(--mosaic-neutral);
$tab-list-bg-color: var(--mosaic-neutral-3);
$tab-list-border-color: var(--mosaic-neutral-3);
