@use "sass:math";
@use "sass:string";
@use "./systelab-bootstrap-settings" as bootstrap;
@forward "./systelab-bootstrap-settings" hide size;
@forward "./mixins";

.ag-theme-alpine {
  --ag-header-background-color: white;
  --ag-data-color: black;
  --ag-header-foreground-color: black;
}

:root {

  --slab_background_primary: white;
  --slab_foreground_primary: black;

  --slab_modal_header_background: rgb(248, 248, 248);
  --slab_modal_bottom_background: rgb(248, 248, 248);
  --slab_component_border_color: rgb(185, 189, 190);

  --slab_table_border_color: rgb(216, 216, 216);
  --slab_table_row_even_background: #F4F4F4;
  --slab_table_row_odd_background: rgb(253, 253, 253);
  --slab_table_row_selection_background: rgb(200, 223, 252);
  --slab_tab_selection_background: white;
  --slab_table_row_hover_background: rgb(233, 242, 254);
  --slab_table_row_selection_foreground: black;
  --slab_scrollbar_thumb_background: rgb(220, 220, 220);
  --slab_scrollbar_width: 10px;
  --slab_scrollbar_height: 10px;

  --primary: rgb(21, 143, 239);
  --success: rgb(194, 217, 93);
  --warning: rgb(255, 210, 54);
  --danger: rgb(255, 73, 68);
  --info: rgb(178, 140, 232);
  --secondary: rgb(170, 170, 170);
  --text-color: rgb(21, 143, 239);
  --text-color-secondary: rgb(255, 255, 255);

  --primary_light: rgb(74, 161, 255);
  --primary_lighter: rgb(165, 208, 255);
  --success_light: rgb(200, 221, 109);
  --success_lighter: rgb(206, 225, 125);
  --warning_light: rgb(255, 214, 74);
  --warning_lighter: rgb(255, 219, 94);
  --danger_light: rgb(255, 91, 87);
  --danger_lighter: rgb(255, 109, 105);
}

// Internal variable to help set the size
$slab-size-percentage: 1.2 !default;
// Internal variable to set the font size
$slab-base-font-size: 15px !default;
// Defines the application font size
$slab-base-body-font-size: $slab-base-font-size string.unquote("/") math.ceil($slab-base-font-size * 1.25) !default;
// Defines the application font family
$slab-base-body-font-family: bootstrap.$font-family-base;
// Defines the application body color
$slab-base-body-color: #3F3F3F !default;
// Defines the minimum width of the body
$slab-app-min-width: 367px !default;
// defines the minimum height of the body
$slab-app-min-height: 375px !default;

// Defines the ipad
$slab-ipad-width: 1024px !default;

$background-primary: rgb(255, 255, 255) !default;
$background-secondary: rgb(238, 238, 238) !default;
// Defines the color for selected elements
$slab-selected-background-color: rgb(200, 223, 252) !default;

// Internal variable to define the height of the elements in a form
$form-elements-height: math.floor(28px * $slab-size-percentage) !default;


$slab-component-border-color: #b9bdbe !default;
$slab-focus-component-border-color: #8cc8f7 !default;
$slab-focus-component-shadow: 0 0 0 3px var(--primary_lighter) !default;

//Grayscale
$light-gray: rgb(248, 248, 248) !default;
$medium-gray: rgb(214, 214, 214) !default;
$dark-gray: rgb(128, 128, 128) !default;
$darker-gray: rgb(45, 45, 45) !default;

$dark-green: rgb(4, 123, 87) !default;
$darker-green: rgb(47, 148, 60) !default;

$table-gray: rgb(149, 149, 149) !default;

// Defines the application header height
$slab-app-header-height: 56px !default;
// Defines the width of the user area in the application header
$slab-app-header-user-width: 130px !default;

$slab-dialog-header-color: $light-gray !default;
$slab-dialog-fullscreen-header-color: none !default;

$slab-dialog-border-color: rgba(170, 170, 170, 0.8) !default;
// Defines the height of the dialogs header
$slab-dialog-header-height: 65px !default;
// Defines the minimum width for the button
$slab-minimum-button-width: 85px !default;

// Defines the height of the rows of a table
$table-row-even-background-color: #F4F4F4 !default;
$table-row-odd-background-color: rgb(253, 253, 253) !default;
$table-row-selected-background-color: $slab-selected-background-color !default;
$table-row-selected-color: black !default;

// Defines the height of the ui-grid-header-cell
$grid-header-height: 39px !default;
// Defines the line-height of the ui-grid-header-cell.
$grid-header-line-height: $grid-header-height - $slab-base-font-size + 2 !default;
$grid-header-background-color: white !default;
$grid-header-text-color: black !default;
$grid-border-color: #dee2e6 !default;

// Defines the height and the min-height of the ui-grid row and cell
$grid-cell-height: 39px !default;
$slab-table-min-row-height: 39px !default;

$slab-tree-row-height: $slab-table-min-row-height;


// Defines the height of the tab
$slab-tab-height: 28px !default;
// Defines the min-width of the tab
$slab-tab-min-width: 120px !default;
// Define the top margin and the gutter between tab elements
$slab-tab-space: 5px !default;
// Define the color for non active tabs
$slab-tab-no-active-bg-color: rgb(255, 255, 255) !default;

// Defines the width of the combobox button
$slab-combo-check-cell-padding: 12px !default;


// Define the height and the line-height of the checkbox
$slab-checkbox-height: 22px !default;
$slab-checkbox-grid-height: 22px !default;

$slab-checkbox-border-color: var(--primary) !default;
$slab-checkbox-color: white !default;
$slab-checkbox-text-gap: $slab-checkbox-height * 1.5 !default;


$slab-switch-bg-color: transparent !default;
$slab-switch-circle-color: $dark-gray !default;
$slab-switch-bg-color-checked: var(--primary) !default;
$slab-switch-circle-color-checked: white !default;
$slab-switch-height: 22px !default;

// Define the height and the line-height of the radio
$slab-radio-height: 22px !default;
// Defines the padding-left of the radio
$slab-radio-text-gap: $slab-radio-height * 1.5 !default;
$slab-radio-border-color: var(--primary) !default;
$slab-radio-color: white !default;

// Defines the slider height
$slab-slider-height: 24px !default;
// Defines the height of the ui-slider
$slab-slider-background-line: math.round(calc($slab-slider-height / 3));
$slab-slider-circle-color: white !default;
$slab-slider-circle-border-color: var(--primary) !default;


$slab-nanobar-height: 4px !default;
$slab-nanobar-with-progress-height: 28px !default;
$slab-nanobar-color: var(--warning) !default;


// Defines the row line-height of the dropdown and the row line-height of the tree
$slab-dropdown-line-height: $form-elements-height !default;
$slab-dropdown-disabled-fg-color: rgb(192, 192, 192) !default;

// Defines the width of the searcher button
$slab-searcher-button-width: $form-elements-height !default;

// Defines the default width of the spinner
$slab-spinner-width: 100px !default;

// Define the line-height of the datepicker’s navigation bar.*/
$slab-datepicker-header-navigation-line-height: 25px !default;

// Defines the min-height of the textarea.
$slab-textarea-min-height: 140px !default;

/* $twolist-row-height: define the row height*/
$slab-twolist-row-height: $slab-table-min-row-height;


/* $sort-list-row-height: define the row height*/
$slab-sort-list-row-height: $slab-table-min-row-height;

/* Input Border radius */
$slab-border-radius: 5px !default;