/**
 *  Modus Variables
 *
 *  Variables should follow the `$component-state-property-size` formula for
 *  consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 *
 *  Theme specific variables (light vs dark) are defined in _light-theme.scss
 *  and _dark-theme.scss
 */

$enable-deprecation-messages: false;

// Fonts and Icons
$primary-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$icon-font-classes: ".modus-icon", ".modus-icons" !default;
$icon-font-families: "modus-icon", "modus-icons" !default;

// Helpers

$rem-1px: 0.0625rem;
$rem-2px: 0.125rem;
$rem-3px: 0.1875rem;
$rem-4px: 0.25rem;
$rem-5px: 0.3125rem;
$rem-6px: 0.375rem;
$rem-7px: 0.4375rem;
$rem-8px: 0.5rem;
$rem-9px: 0.5625rem;
$rem-10px: 0.625rem;
$rem-11px: 0.6875rem;
$rem-12px: 0.75rem;
$rem-13px: 0.8125rem;
$rem-14px: 0.875rem;
$rem-15px: 0.9375rem;
$rem-16px: 1rem;
$rem-18px: 1.125rem;
$rem-20px: 1.25rem;
$rem-22px: 1.375rem;
$rem-24px: 1.5rem;

// Options

// Quickly modify global styling by enabling or disabling optional features.

$enable-validation-icons:                     false !default;

// Shadows

$box-shadow-sm: 0 0 2px rgba(37, 42, 46, 0.3) !default;
$box-shadow: 0 0 4px rgba(37, 42, 46, 0.3) !default;
$box-shadow-lg: 0 0 8px rgba(37, 42, 46, 0.3) !default;

// Opacity
$disabled-opacity: 0.3 !default;

// Components
//
// Define common padding and border radius sizes and more.

$border-radius:               $rem-4px !default;
$border-radius-lg:            $rem-4px !default;
$border-radius-sm:            $rem-2px !default;

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

// stylelint-disable value-keyword-case
$font-family-sans-serif:      $primary-font !default;
// stylelint-enable value-keyword-case

$font-size-base:              $rem-16px !default;
$font-size-small:             $rem-12px !default;
$font-size-large:             $rem-14px !default;
$icon-font-size-base:         $rem-16px !default;
$small-font-size:             $rem-12px !default;
$body-font-size:              $font-size-large !default;

$font-weight-semi-bold:       600 !default;

$h1-font-size:                $rem-24px !default;
$h2-font-size:                $rem-20px !default;
$h3-font-size:                $rem-18px !default;
$h4-font-size:                $rem-16px !default;
$h5-font-size:                $rem-14px !default;
$h6-font-size:                $rem-12px !default;

$display1-size:               4.5rem !default;
$display2-size:               2.5rem !default;
$display3-size:               1.875rem !default;
$display4-size:               1.875rem !default;

$display1-weight:             700 !default;
$display2-weight:             700 !default;
$display3-weight:             600 !default;
$display4-weight:             600 !default;

// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding-y:        $rem-4px !default;
$table-cell-padding-x:        $rem-16px !default;
$table-cell-padding:          $table-cell-padding-y $table-cell-padding-x !default;
$table-cell-font-size:        $body-font-size !default;
$table-cell-height:           3rem !default;
$table-cell-line-height:      1.5 !default;
$table-cell-vertical-align:   middle !default;

$table-cell-padding-y-sm:     $rem-4px !default;
$table-cell-padding-x-sm:     $rem-8px !default;
$table-cell-padding-sm:       $table-cell-padding-y-sm $table-cell-padding-x-sm !default;
$table-cell-font-size-sm:     $rem-12px !default;
$table-cell-height-sm:        2rem !default;
$table-cell-line-height-sm:   1.25 !default;

$table-active-bg:             ui-color('selected') !default;
$table-hover-bg:              ui-color('selected') !default;
$table-dark-hover-bg:         rgba(ui-color('selected'), .25) !default;

$table-th-font-weight:        600 !default;

$table-dark-bg:               trimble-gray('gray-dark-1') !default;

$table-border-color:          $col_gray_2 !default;

$table-disabled-opacity:      $disabled-opacity !default;

// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-padding-y:         $rem-3px !default;
$input-btn-padding-x:         $rem-10px !default;
$input-btn-font-size:         $font-size-small !default;
$input-btn-line-height:       2 !default;

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-box-shadow:  $box-shadow-sm !default;

$input-btn-padding-y-sm:      $rem-3px !default;
$input-btn-padding-x-sm:      $rem-8px !default;

$input-btn-padding-y-lg:      $rem-7px !default;
$input-btn-padding-x-lg:      $rem-15px !default;
$input-btn-font-size-lg:      $font-size-large !default;
$input-btn-line-height-lg:    2 !default;

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

$btn-height:                  2rem;
$btn-padding-x:               1rem !default;
$btn-font-size:               $rem-14px !default;
$btn-icon-font-size:          $rem-20px !default;
$btn-line-height:             1.75 !default;
$btn-icon-top:                5px !default; // used to vertically align icon in button
$btn-icon-neg-margin:         -6px !default; // negative margin to position icon within button
$btn-icon-pos-margin:         $rem-8px !default; // space between icon and button text

$btn-height-sm:               $rem-24px !default;
$btn-padding-x-sm:            .5rem !default;
$btn-padding-y-sm:            2px !default;
$btn-font-size-sm:            $rem-12px !default;
$btn-icon-font-size-sm:       $rem-14px !default;
$btn-icon-top-sm:             2px !default; // used to vertically align icon in button
$btn-icon-neg-margin-sm:      -3px !default; // negative margin to position icon within button
$btn-icon-pos-margin-sm:      $rem-4px !default; // space between icon and button text

$btn-height-lg:               3rem;
$btn-padding-x-lg:            $rem-24px !default;
$btn-font-size-lg:            1rem !default;
$btn-icon-font-size-lg:       $rem-22px !default;
$btn-line-height-lg:          2 !default;
$btn-icon-top-lg:             5px !default; // used to vertically align icon in button
$btn-icon-neg-margin-lg:      -8px !default; // negative margin to position icon within button
$btn-icon-pos-margin-lg:      $rem-12px !default; // space between icon and button text

$btn-font-weight:             600 !default;
$btn-disabled-opacity:        $disabled-opacity !default;

$btn-focus-box-shadow:        0 0 0 .2rem !default;

// Forms

$label-margin-bottom:                   $rem-7px !default;

$input-disabled-bg:                     trimble-gray('gray-1') !default;
$input-disabled-opacity:                0.7 !default;

$input-border-color:                    trimble-gray('gray-0') !default;

$input-focus-border-color:              ui-color("active") !default;
$input-focus-bottom-border:             $rem-2px !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-padding-x:                       0.75rem !default;
$input-padding-x-lg:                    1rem !default;

$input-placeholder-color:               trimble-gray('gray-3') !default;

$label-color:                           trimble-gray('gray-8') !default;
$label-font-size:                       $rem-12px !default;
$label-font-size-lg:                    $rem-15px !default;

$input-group-addon-bg:                  $input-bg !default;

$custom-control-height:                 2rem !default;
$custom-control-height-sm:              1.5rem !default;
$custom-control-gutter:                 $rem-8px !default;
$custom-control-gutter-sm:              $rem-8px !default;
$custom-control-spacer-x:               $rem-4px !default;

$custom-control-indicator-size:         $rem-18px !default;
$custom-control-indicator-size-sm:      $rem-14px !default;
$custom-control-indicator-bg:           $control-bg-color !default;

$custom-control-indicator-border-width: $rem-2px !default;

$custom-control-indicator-focus-border-color:   $control-bg-color !default;

$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.8 4.7'%3e%3cpath fill='#{$control-surface-color}' d='M1.7,4.7L0.1,3.2C0,3,0,2.7,0.1,2.5s0.5-0.2,0.7,0l0.9,0.9l3.2-3.2C5.1,0,5.4,0,5.6,0.1s0.2,0.5,0,0.7L1.7,4.7z '/%3e%3c/svg%3e"), "#", "%23") !default;

$custom-checkbox-indicator-icon-indeterminate:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='3.8' viewBox='0 0 4 4'><path stroke='#{$control-surface-color}' d='M-0.1 2h4'/></svg>") !default;

$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='6' fill='none' stroke-width='3.5' stroke='#{$control-surface-color}'/%3e%3c/svg%3e"), "#", "%23") !default;

$custom-indicator-square:                       str-replace(url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%2026%22%3E%3Crect%20fill%3D%22#{$input-placeholder-color}%22%20width%3D%221%22%20height%3D%2226%22%2F%3E%3C%2Fsvg%3E"), "#", "%23") !default;

$custom-switch-scale:                           1.0 !default;
$custom-switch-width:                           2rem !default;
$custom-switch-height:                          $rem-18px !default;
$custom-switch-indicator-size:                  $rem-14px !default;
$custom-switch-indicator-border-radius:         $custom-switch-indicator-size * .5 !default;

$custom-select-indicator-color:                 $control-element-color !default;
$custom-select-indicator:                       str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.06' height='6.28'%3E%3Cpath data-name='Path 3707' d='M.53.53l5 5 5-5' fill='none' stroke='#{$control-element-color}' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"), "#", "%23") !default;

$custom-select-font-size-lg:                    $input-btn-font-size-lg !default;

// Progress Bar

$progress-bg:                                   $col_white !default;
$progress-height:                               16px !default;

// Sliders <input type="range">

$custom-range-track-bg:                         $col_blue !default;
$custom-range-track-disabled-bg:                $control-bg-color !default;

$custom-range-thumb-bg:                         $control-surface-color !default;
$custom-range-thumb-active-bg:                  $control-checked-color !default;
$custom-range-thumb-disabled-bg:                $control-bg-color !default;
$custom-range-thumb-border:                     2px solid $control-checked-color !default;
$custom-range-thumb-disabled-border-color:      theme-color('dark') !default;
$custom-range-thumb-box-shadow:                 none !default;
$custom-range-thumb-focus-box-shadow:           none !default;

// Navs

$nav-tabs-border-color:             trimble-gray('gray-1') !default;
$nav-tabs-link-hover-bg:            ui-color('selected') !default;
$nav-tabs-link-hover-border-color:  transparent transparent $nav-tabs-border-color !default;
$nav-tabs-link-color:               theme-color('dark') !default;
$nav-tabs-link-active-color:        ui-color('active') !default;
$nav-tabs-link-active-bg:           transparent !default;
$nav-tabs-link-active-border-color: transparent transparent $nav-tabs-link-active-bg !default;
$nav-tabs-active-border-width:      0.1875rem !default;

$nav-tabs-height:                   3rem !default;
$nav-tabs-height-sm:                2rem !default;
$nav-tabs-padding-y:                .625rem !default;
$nav-tabs-padding-x:                2rem !default;
$nav-tabs-padding-y-sm:             .25rem !default;
$nav-tabs-padding-x-sm:             1rem !default;

$nav-tabs-font-size:                $font-size-large !default;
$nav-tabs-icon-size:                $rem-24px !default;
$nav-tabs-icon-size-sm:             $rem-18px !default;
$nav-tabs-font-size-sm:             $font-size-small !default;
$nav-tabs-link-font-weight:         600 !default;

// Dropdowns
//
// Dropdown menu container and contents.



// Pagination

$pagination-height:                 2rem !default;
$pagination-padding-y:              calc((#{$pagination-height} - #{$font-size-large}) / 2) !default;
$pagination-line-height:            1 !default;

$pagination-font-size-sm:           $rem-12px !default;
$pagination-height-sm:              1.5rem !default;
$pagination-padding-y-sm:           calc((#{$pagination-height-sm} - #{$pagination-font-size-sm}) / 2) !default;
$pagination-line-height-sm:         1 !default;

$pagination-font-size-lg:           $rem-20px !default;
$pagination-height-lg:              3rem !default;
$pagination-padding-y-lg:           calc((#{$pagination-height-lg} - #{$pagination-font-size-lg}) / 2) !default;
$pagination-line-height-lg:         1 !default;

$pagination-color:                  theme-color('dark') !default;
$pagination-border-width:           0 !default;

$pagination-hover-color:            theme-color('dark') !default;
$pagination-hover-bg:               ui-color('hover') !default;

$pagination-active-color:           $col_blue_light !default;
$pagination-active-bg:              $col_blue_pale !default;

$pagination-disabled-color:         trimble-gray('gray-2') !default;
$pagination-disabled-bg:            $col_white !default;

// Cards

$card-border-color:                 ui-color('main-background') !default;
$card-inner-border-color:           trimble-gray('gray-1') !default;
$card-bg:                           ui-color('main-background') !default;
$card-cap-bg:                       ui-color('main-background') !default;
$card-spacer-x:                     16px !default;

// Tooltips

$tooltip-font-size:                 $font-size-small !default;
$tooltip-color:                     ui-color('main-background') !default;
$tooltip-bg:                        $col_gray_9 !default;
$tooltip-opacity:                   1 !default;

// Toasts

$toast-max-width:                   370px !default;
$toast-padding-x:                   1rem !default;
$toast-padding-y:                   .5rem !default;
$toast-font-color-dark:             ui-color('main-background') !default;
$toast-background-color:            ui-color('main-background') !default;
$toast-dark-background-color:       theme-color('dark') !default;
$toast-border-radius:               $border-radius !default;

// Badges

$badge-font-size:                   $rem-12px !default;
$badge-padding-y:                   calc((20px - #{$badge-font-size}) / 2) !default;
$badge-padding-x:                   .5rem !default;

$badge-font-size-sm:                $rem-10px !default;
$badge-padding-y-sm:                calc((14px - #{$badge-font-size-sm}) / 2) !default;
$badge-padding-x-sm:                .25rem !default;

$badge-font-size-lg:                $rem-16px !default;
$badge-padding-y-lg:                calc((28px - #{$badge-font-size-lg}) / 2) !default;
$badge-padding-x-lg:                .75rem !default;

// Modals

$modal-backdrop-bg:                 theme-color('dark') !default;
$modal-backdrop-opacity:            .75 !default;

$modal-title-font-size:             $rem-16px !default;
$modal-title-line-height:           1.75 !default;

$modal-header-border-color:         $col_gray_0 !default;
$modal-header-height:               4.25rem !default;
$modal-header-padding-y:            1rem !default;
$modal-header-padding-x:            1rem !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x calc(#{$modal-header-padding-y} - 1px) !default;

$modal-footer-height:               $modal-header-height !default;
$modal-footer-padding-y:            1rem !default;
$modal-footer-padding-x:            1rem !default;
$modal-footer-padding:              calc(#{$modal-footer-padding-y} - 1px) $modal-footer-padding-x $modal-footer-padding-y !default;

// Navbar

$navbar-padding-y:                  .25rem !default;

// Alerts
//
// Define alert colors, border radius, and padding.

$alert-padding-y:                   1.031rem !default;
$alert-padding-x:                   1rem !default;
$alert-left-border-width:           $rem-12px !default;
$alert-font-weight:                 700 !default;
$alert-icon-padding:                0.5rem !default;
$alert-icon-font:                   1.2rem !default;

// List group

$list-group-bg:                     ui-color('main-background') !default;
$list-group-item-border-color:      ui-color('hover') !default;
$list-group-item-outline-color:     ui-color('hover') !default;

$list-group-item-height-lg:         3rem !default; // 48px
$list-group-item-height:            2.5rem !default; // 40px
$list-group-item-height-sm:         2rem !default; // 32px

$list-group-item-padding-y:         $rem-7px !default;
$list-group-item-padding-y-sm:      $rem-3px !default;
$list-group-item-padding-x:         $rem-16px !default;
$list-group-item-padding-x-sm:      $rem-12px !default;

$list-group-item-font-size:         $font-size-base !default;
$list-group-item-font-size-sm:      $rem-12px !default;
$list-group-item-line-height:       1.25 !default;
$list-group-item-line-height-sm:    1 !default;

$list-group-hover-bg:               ui-color('hover') !default;
$list-group-active-color:           $body-color !default;
$list-group-active-bg:              ui-color('selected') !default;

$list-group-item-disabled-opacity:  $disabled-opacity !default;
$list-group-item-font-size:         $rem-16px !default;

// Breadcrumbs

$breadcrumb-bg:                     ui-color('main-background') !default;
$breadcrumb-active-color:           #252a2e !default;
$breadcrumb-icon-color:             ui-color('active') !default;
$breadcrumb-divider:                str-replace(url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%220%200%2019%2019%22%20width%3D%2712%27%20height%3D%2716%27%3E%3Cpath%20fill%3D%22#{$control-element-color}%22%20d%3D%27M7.2%2C18.4%2C13.52%2C12%2C7.2%2C5.6%2C8.8%2C4l8%2C8-8%2C8Z%27%2F%3E%3C%2Fsvg%3E%0A"), "#", "%23") !default;

// Chips
$chip-font-weight:                  600 !default;
$chip-border-radius:                1rem !default;
$chip-font-size:                    $rem-12px !default;
$chip-padding-y:                    $rem-2px !default;
$chip-base-color:                   $col_gray_1 !default;
$chip-font-color:                   $col_gray_9 !default;

$chip-sm-font-size:                 $rem-12px !default;
$chip-sm-padding-y:                 $rem-2px !default;

// Accordions
$accordion-header-padding-y:        $rem-14px !default;
$accordion-header-padding-y-sm:     $rem-8px !default;

$accordion-header-padding-x:        $rem-4px !default;
$accordion-header-padding-x-sm:     $rem-4px !default;

$accordion-header-font-size:        $rem-16px !default;
$accordion-header-font-size-sm:     $rem-14px !default;
$accordion-header-line-height:      calc(20 / 16) !default; // (48 - vertical padding) / fontsize
$accordion-header-line-height-sm:   calc(16 / 12) !default; // (32 - vertical padding) / fontsize

$accordion-content-font-size:       $rem-14px !default;
$accordion-content-font-size-sm:    $rem-12px !default;

$accordion-header-color:            theme-color('dark') !default;
$accordion-border-color:            trimble-gray('gray-1') !default;
// $accordion-active-border-color:     ui-color('active') !default;
$accordion-indicator-closed:        str-replace(url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2716%27%3E%3Cpath%20fill%3D%22#{$control-element-color}%22%20d%3D%27M3.5%2C0.6l9.7%2C9.8l9.7-9.8c0.7-0.8%2C2-0.7%2C2.7%2C0l0.1%2C0.1c0.7%2C0.8%2C0.7%2C2%2C0%2C2.7L13.2%2C16L0.8%2C3.4C0%2C2.6%2C0%2C1.4%2C0.8%2C0.6l0.1-0.1C1.6-0.2%2C2.8-0.2%2C3.5%2C0.6z%27%2F%3E%3C%2Fsvg%3E%0A"), "#", "%23") !default;