// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$is-sirius:                    true !default;
$enable-navbar-fixed-top:      true;
$enable-shadows:               true;

//
// Colors
//
$white:                         #FFFFFF;
$gray-200:                      #e9eaec;
$gray-300:                      #f8f8f8; // list group hover full color
$gray-400:                      #b1b7be;
$black:                         #000;

$text-muted:                    theme-color("info"); // text-muted
$border-color:                  #d6d6d6;             // border-color


$input-border-color:            $border-color;

$x-row-selected-color:        #ebf1f4;
$x-row-hover-color:             theme-color('light-secondary');

//
// Body
//
$body-color:                    theme-color("default");

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1200px,
  xxxl: 1380px
);

$grid-gutter-width:           2rem;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.

// stylelint-disable value-keyword-case
$font-family-base:
  //TitleX Default Fonts
  'Open Sans',
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
    // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
    // Windows
  "Segoe UI",
    // Android
  "Roboto",
    // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
    // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

//
// Font Sizes
//
$font-size-base:              0.875rem;                //14px
$font-size-lg:                1.0625rem;               //17px
$font-size-sm:                0.8125rem;               //13px
$font-size-xs:                0.750rem !default;       //12px

$h1-font-size:                2rem;
$h2-font-size:                1.75rem;
$h3-font-size:                1.5rem;
$h4-font-size:                1.25rem;
$h5-font-size:                1rem;
$h6-font-size:                $font-size-sm;

//
// Sizes
// This variable affects the `.h-*` and `.w-*` classes.
//
$sizes:(
  20: 20%,
  30: 30%,
  40: 40%,
  60: 60%,
  70: 70%,
  80: 80%,
  85: 85%,
  90: 90%,
);

$avatar-size-sm:             1.875rem;

//
// Font Weight
//
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            600;

$headings-font-weight:        $font-weight-normal;

//
// Z-index
//
// Fix Dropdown z-index when open it in Modal
$zindex-dropdown:             1050;



// Components
//
// Define common padding and border radius sizes and more.
$line-height-xs:              1 !default;
$line-height-base:            1.5715;
$line-height-lg:              1;

$border-radius-sm:            0.25rem;
$border-radius:               0.25rem;
$border-radius-lg:            0.5rem;
$border-radius-xl:            1rem !default;

//
// AG-Grid Icon Path
//
$icons-path:                  "~@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material/icons/";

//
$navbar-nav-link-padding-x:   1rem;
$navbar-light-color:          $white;


// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-font-size-xs:      $font-size-xs   !default;
$input-btn-font-size-sm:      $font-size-sm   !default;
$input-btn-font-size-lg:      $font-size-lg   !default;

$input-btn-line-height-sm:    $line-height-xs;
$input-btn-line-height-xs:    $line-height-xs !default;
$input-height-inner-sm:       1.875rem; // From Bootstrap 4.1.3, form-control have a height
$input-line-height-sm:        1.38462;   // Fix Placeholder Bug on Safari;
$btn-line-height-sm:          initial;  // Fix .btn-sm height when line-height: 1;

$input-btn-padding-y-xs:      0.5rem          !default;
$input-btn-padding-x-xs:      1.5rem          !default;

$input-btn-padding-y-sm:      0.375rem;
$input-btn-padding-x-sm:      1.000rem;

$input-btn-padding-y-lg:      1rem;
$input-btn-padding-x-lg:      3rem;

$input-btn-focus-width:       .15rem;
$input-btn-focus-color:       mix(theme-color("primary"), $white, 22%);
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;

$input-group-addon-bg:        $white;

// disable inset form-control shadow while keep shadow for other components.
$input-box-shadow:            inset 0 0 0 rgba($black, .000);
$btn-box-shadow:              $input-box-shadow;
$custom-select-box-shadow:    $input-box-shadow;

// Custom Select Height
//
$custom-select-height-sm:    2rem;
$custom-select-font-size-sm: $font-size-sm;
//
// Btn Default Overrides
//
$btn-font-weight:             $font-weight-bold;
$btn-letter-spacing:          0.02em !default;
$btn-disabled-opacity:        0.3;


// Make Btn Padding larger then form-control
$btn-padding-x:               1.5rem;
$btn-padding-y:               0.375rem;

//popover padding

$popover-body-padding-y:      1rem;
$popover-body-padding-x:      1rem;

// Tooltip

$tooltip-bg:                  theme-color('dark-secondary');
$tooltip-font-size:           $font-size-xs;
//
// Badges
//
$badge-font-size:             75%;
$badge-padding-y:             0.375rem;
$badge-padding-x:             1em;
$badge-pill-padding-x:        0.5rem;
$badge-font-weight:           $font-weight-normal;

//
// Breadcrumb
//
$breadcrumb-bg:               none;

//
// Modal
//
$modal-dialog-margin:            0rem; // Put 'rem' here to make sure `calc()` working
$modal-dialog-margin-y-sm-up:    $modal-dialog-margin;

$modal-content-box-shadow-xs:    0 1rem 2rem -0.5rem rgba(theme-color('dark'), .24);
$modal-content-box-shadow-sm-up: $modal-content-box-shadow-xs;

$modal-backdrop-bg:              theme-color('dark-secondary');
$modal-backdrop-opacity:         0.6;

$modal-header-border-color:      $border-color;

$modal-inner-padding:            1rem 2rem;

$modal-lg:                       56.25rem;
$modal-md:                       37.50rem;
$modal-sm:                       22.50rem;

//
// Cards
//
$card-border-radius:          $border-radius-lg;

//
// Close
//
$close-font-size:             $font-size-lg;

//
// Form Controls
//
$input-disabled-bg:                             theme-color('light-transparent');
$custom-control-indicator-bg:                   $white;
$custom-control-indicator-bg-size:              cover;
$custom-control-indicator-box-shadow:           none;

$custom-control-indicator-focus-box-shadow:     none;

$custom-control-indicator-checked-bg:           theme-color('secondary-lighter');
$custom-control-indicator-active-bg:            theme-color('primary-transparent');
$custom-control-indicator-disabled-bg:          $input-disabled-bg;
$custom-checkbox-indicator-border-radius:       0;
$custom-checkbox-indicator-indeterminate-color: theme-color('primary');
$custom-checkbox-indicator-indeterminate-bg:    $custom-control-indicator-checked-bg;

$custom-control-indicator-checked-disabled-bg:  $input-disabled-bg;

$custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='#{$custom-checkbox-indicator-indeterminate-color}' x='3' y='7' width='10' height='2'/%3E%3C/svg%3E"), "#", "%23");

$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon fill='#{$custom-checkbox-indicator-indeterminate-color}' points='4 6 7 9 12 4 12 7 7 12 4 9'%3E%3C/polygon%3E%3C/svg%3E"), "#","%23");

$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='#{$custom-checkbox-indicator-indeterminate-color}' cx='8' cy='8' r='3'%3E%3C/circle%3E%3C/svg%3E"), "#","%23");

$custom-select-focus-box-shadow:                $input-btn-focus-box-shadow;
$custom-select-disabled-bg:                     $input-disabled-bg;


//
// Dropdown menu container and contents.
//
$dropdown-min-width:                10rem;
$dropdown-padding-y:                .25rem;
$dropdown-spacer:                   1px;
$dropdown-border-color:             rgba($black, .1);
$dropdown-divider-bg:               $border-color;
$dropdown-box-shadow:               0 2px 5px rgba($black, .1);

$dropdown-link-color:               theme-color("grey");

$dropdown-link-hover-color:         theme-color("primary");
$dropdown-link-hover-bg:            theme-color("primary-transparent");

$dropdown-link-disabled-color:      theme-color("light");

$dropdown-item-padding-x:           1.250rem;

$caret-width:                       0.25rem;

//
// Navs
//
$nav-tabs-border-color:             $border-color;
$nav-tabs-link-active-color:        theme-color('secondary-darker');
$nav-tabs-link-active-bg:           transparent;

//
// List Group
//
$list-group-bg:                     transparent;
$list-group-border-color:           $border-color;
$list-group-item-padding-y:         0.5rem;
$list-group-item-padding-x:         1.0rem;
$list-group-hover-bg:               theme-color("light-transparent");
$list-group-active-bg:              theme-color("primary-transparent");
$list-group-disabled-color:         $text-muted;
$list-group-action-active-bg:       $list-group-active-bg;

//
// Pagination
//
$pagination-padding-x-sm:           .75rem;
$pagination-padding-x-lg:           1.0rem;
$pagination-line-height:            1.33;

$pagination-disabled-color:         $text-muted;
$pagination-border-color:           $border-color;
$pagination-hover-border-color:     $pagination-border-color;
$pagination-disabled-border-color:  $pagination-border-color;

// Progress
$progress-height:                   0.25rem;
$progress-bg:                       theme-color("primary-transparent");
$progress-border-radius:            $border-radius-lg;
$progress-box-shadow:               none;