@use "sass:math";

// Spacing
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: ($spacer * 0.25),
  2: ($spacer * 0.5),
  3: ($spacer * 0.75),
  4: $spacer,
  5: ($spacer * 1.25),
  6: ($spacer * 1.5),
  7: ($spacer * 2),
  8: ($spacer * 3)
) !default;

// Grid columns
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1366px
) !default;
$grid-gutter-width: map-get($spacers, 5) !default;

// Shadows
$enable-shadows: true !default;
$shadow-sm: 0 1px 4px 2px rgba($black, 0.08) !default;
$shadow-sm-border-color: rgba($black, 0.04) !default;
$shadow-sm-border-width: 1px !default;
$shadow-md: 0 0 0 1px rgba($black, 0.04), 0 1px 12px 4px rgba($black, 0.12) !default;
$shadow-lg: 0 0 0 1px rgba($black, 0.04), 0 1px 24px 12px rgba($black, 0.12) !default;
$box-shadow-sm: $shadow-sm !default;
$box-shadow: $shadow-md !default;
$box-shadow-lg: $shadow-lg !default;

// Typography
$font-family-base: "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;
$font-size-base: 1rem !default;
$font-size-xlg: $font-size-base * 1.125 !default;
$font-size-lg: $font-size-base !default;
$font-size-md: $font-size-base * 0.875 !default;
$font-size-sm: $font-size-base * 0.8125 !default;
$font-size-xs: $font-size-base * 0.75 !default;
$h1-font-size: $font-size-base * 1.625 !default;
$h2-font-size: $font-size-base * 1.25 !default;
$h3-font-size: $font-size-base * 1.125 !default;
$h4-font-size: $font-size-base !default;
$h5-font-size: $font-size-base !default;
$h6-font-size: $font-size-base * 0.875 !default;
$font-weight-normal: 400 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$headings-font-weight: $font-weight-semibold !default;
$headings-margin-bottom: 0 !default;
$letter-spacing: -0.2px !default;
$letter-spacing-slim: -0.4px !default;

// Links
$link-color: $gray-600;
$link-decoration: none !default;
$link-hover-color: $link-color;
$link-hover-decoration: underline !default;

// Line heights
$line-height-base: math.div(1.25rem, $font-size-md) !default;
$line-height-lg: math.div(1.5rem, $font-size-lg) !default;
$line-height-sm: math.div(1rem, $font-size-sm) !default;
$headings-line-height: 1.25 !default;
$h1-line-height: 2rem !default;
$h2-line-height: 1.5rem !default;
$h3-line-height: 1.375rem !default;
$h4-line-height: $headings-line-height !default;
$h5-line-height: $headings-line-height !default;
$h6-line-height: $headings-line-height !default;

// Borders (general)
$border-width: 1px !default;
$border-radius: 0.25rem !default;
$border-active-width-lg: 4px !default;
$border-active-width: 3px !default;
$border-active-width-sm: 2px !default;

// Icons
$icon-size: 1.5rem !default;
$icon-size-sm: 1.25rem !default;
$icon-size-xs: 1.125rem !default;

// Alerts
$alert-padding-y: map-get($spacers, 2) !default;
$alert-padding-x: map-get($spacers, 2) !default;
$alert-link-font-weight: $font-weight-semibold !default;
$alert-border-width: 0 !default;
$alert-icon-size: $icon-size !default;

// Badges
$badge-font-size: $font-size-sm !default;
$badge-font-weight: $font-weight-bold !default;
$badge-padding-y: map-get($spacers, 1) * 0.5 !default;
$badge-padding-x: map-get($spacers, 2) !default;
$badge-height: 20px !default;
$badge-max-width: 196px !default;

// Counters
$badge-chip-padding-y: map-get($spacers, 1) !default;

// Buttons + Forms
$input-btn-padding-y: map-get($spacers, 2) !default;
$input-btn-padding-x: map-get($spacers, 4) !default;
$input-btn-font-size: $font-size-md !default;
$input-btn-focus-box-shadow: none !default;
$input-btn-focus-color: $focus !default;
$input-btn-focus-color-opacity: 0 !default;
$input-btn-focus-width: 2px !default;

// Buttons
$btn-padding-y: map-get($spacers, 3) * 0.5 !default;
$btn-padding-x: map-get($spacers, 3) !default;
$btn-padding-y-xs: map-get($spacers, 1) * 0.5 !default;
$btn-padding-x-xs: map-get($spacers, 1) !default;
$btn-font-size-xs: $font-size-xs !default;
$btn-font-weight: $font-weight-bold !default;
$btn-border-width: 0 !default;
$btn-line-height: 1.5rem !default;
$btn-line-height-xs: 1.125rem !default;
$btn-box-shadow: none !default;
$btn-active-box-shadow: none !default;
$btn-focus-width: 2px !default;
$btn-hover-bg-shade-amount: 10% !default;
$btn-hover-border-shade-amount: 10% !default;

// Cards
$card-spacer-y: map-get($spacers, 5) !default;
$card-spacer-x: map-get($spacers, 5) !default;
$card-height: 100% !default;
$card-title-spacer-y: $card-spacer-y !default;
$card-button-spacer-x: map-get($spacers, 2) !default;
$card-cap-padding-y: map-get($spacers, 5) !default;
$card-border-color: rgba($black, 0.04) !default;
$card-cap-bg: $white !default;
$card-color: $gray-800 !default;

// Close button
$btn-close-width: $icon-size !default;
$btn-close-color: $gray-600 !default;
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$btn-close-color}'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'/></svg>") !default;

// Dropdowns
$dropdown-min-width: 7.25rem !default;
$dropdown-color: $gray-600 !default;
$dropdown-font-size: $font-size-md !default;
$dropdown-spacer: map-get($spacers, 1) !default;
$dropdown-padding-y: map-get($spacers, 2) !default;
$dropdown-padding-x: map-get($spacers, 3) !default;
$dropdown-border-color: $shadow-sm-border-color !default;
$dropdown-border-width: $shadow-sm-border-width !default;
$dropdown-box-shadow: $shadow-sm !default;
$dropdown-link-color: $gray-600 !default;
$dropdown-link-active-color: $gray-900 !default;
$dropdown-link-active-bg: $gray-100 !default;
$dropdown-link-hover-color: $gray-900 !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-disabled-color: $disabled !default;
$dropdown-item-padding-x: map-get($spacers, 2) !default;
$dropdown-item-padding-y: map-get($spacers, 3) * 0.5 !default;
$dropdown-divider-bg: $gray-200 !default;
$dropdown-divider-margin-y: map-get($spacers, 1) !default;

// Forms

// Label
$form-label-margin-bottom: map-get($spacers, 1) !default;
$form-label-font-size: $font-size-md !default;
$form-label-font-weight: $font-weight-semibold !default;
$form-label-color: $gray-600 !default;

// Helper text
$form-text-font-size: $font-size-sm !default;
$form-text-font-weight: $font-weight-normal !default;
$form-text-color: $gray-600 !default;

// General input/textfield
$input-height: inherit;
$input-height-inner-quarter: map-get($spacers, 1) !default;
$input-padding-y: map-get($spacers, 3) * 0.5 !default;
$input-padding-x: map-get($spacers, 2) !default;
$input-color: $gray-800 !default;
$input-placeholder-color: $gray-500 !default;
$input-plaintext-color: $gray-800 !default;
$input-border-color: $gray-300 !default;
$input-border-width: 2px !default;
$input-box-shadow: none !default;
$input-disabled-color: $gray-500 !default;
$input-disabled-bg: $gray-300 !default;
$input-disabled-border-color: $gray-300 !default;
$input-focus-border-color: $focus !default;
$input-focus-box-shadow: none !default;
$input-group-addon-padding-y: map-get($spacers, 1) !default;
$input-group-addon-padding-x: map-get($spacers, 1) !default;
$input-group-addon-color: $gray-500 !default;
$input-group-addon-bg: $gray-50 !default;

// Checkbox/radio
$form-check-checked-color: #0774d2 !default;
$form-check-label-color: $input-color !default;
$form-check-margin-bottom: map-get($spacers, 2) !default;
$form-check-input-width: map-get($spacers, 5) !default;
$form-check-padding-start: $form-check-input-width + map-get($spacers, 3) !default;
$form-check-input-border: $input-border-width solid $input-border-color !default;
$form-check-input-disabled-bg: $input-border-color !default;
$form-check-input-disabled-opacity: 0.55 !default;
$form-check-input-focus-box-shadow: none !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z'/></svg>") !default; /** stylelint-disable-line max-line-length */
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z'/></svg>") !default; /** stylelint-disable-line max-line-length */
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' viewBox='0 0 24 24' fill='#0774d2'><g><rect fill='none' height='24' width='24'/></g><g><g><path d='M12,2C6.47,2,2,6.47,2,12s4.47,10,10,10s10-4.47,10-10S17.53,2,12,2z'/></g></g></svg>") !default; /** stylelint-disable-line max-line-length */

// Select
$form-select-indicator-color: $input-placeholder-color !default;
$form-select-disabled-color: $input-disabled-color !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-box-shadow: $input-focus-box-shadow !default;
$form-select-indicator-color: $gray-600 !default;
$form-select-bg-position: right center !default;
$form-select-bg-size: $icon-size !default;
$form-select-indicator-padding: $form-select-bg-size !default; // Extra padding for background-image
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='#{$form-select-indicator-color}'><path d='M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z'/></svg>") !default; /** stylelint-disable-line max-line-length */
$form-select-indicator-disabled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' opacity='0.3' fill='#{$form-select-indicator-color}'><path d='M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z'/></svg>") !default; /** stylelint-disable-line max-line-length */

// Switch/toggle
$form-switch-color: $white !default;
$form-switch-bg: $gray-400 !default;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='4' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-width: 2.25rem !default;
$form-switch-padding-start: $form-switch-width + map-get($spacers, 1) !default;
$form-switch-focus-bg-image: $form-switch-bg-image !default;
$form-switch-checked-bg: $primary !default;
$form-switch-checked-bg-image: $form-switch-bg-image !default;

// File upload
$form-file-button-bg: rgba($black, 0.1) !default;
$form-file-button-hover-bg: rgba($black, 0.12) !default;
$form-file-height: 36px;

// Form validation
$form-feedback-font-size: $font-size-sm;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 16 16' fill='%23D72321' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507A.905.905 0 008 5zm.002 6a1 1 0 100 2 1 1 0 000-2z' clip-rule='evenodd'/></svg>") !default; /** stylelint-disable-line max-line-length */

// List groups
$list-group-border-radius: 0.5rem !default;
$list-group-padding-x: map-get($spacers, 4) !default;
$list-group-padding-y: 0 !default;
$list-group-item-padding-x: map-get($spacers, 4) !default;
$list-group-item-padding-y: map-get($spacers, 2) !default;
$list-group-header-padding-x: $list-group-item-padding-x !default;
$list-group-header-padding-y: map-get($spacers, 4) !default;

// Modals
$modal-inner-padding: map-get($spacers, 6) !default;
$modal-content-border-width: 0 !default;
$modal-content-border-radius: $border-radius !default;
$modal-header-border-color: $gray-200 !default;
$modal-content-box-shadow-xs: $shadow-lg !default;
$modal-content-box-shadow-sm-up: $modal-content-box-shadow-xs !default;
$modal-sm: 400px !default;
$modal-md: 600px !default;
$modal-lg: 800px !default;
$modal-xl: 1000px !default;

// Navs (general)
$nav-link-padding-y: map-get($spacers, 2) !default;

// Navs (tabs)
$nav-tabs-border-color: change-color($gray-900, $alpha: 0.1) !default;
$nav-tabs-link-color: $gray-800 !default;
$nav-tabs-link-border-size: $border-active-width !default;
$nav-tabs-link-hover-border-color: $gray-400 !default;
$nav-tabs-link-active-border-color: $gray-900 !default;
$nav-tabs-link-active-color: $nav-tabs-link-color !default;

// Navs (capsule)
$nav-capsule-bg: $gray-200 !default;
$nav-capsule-color: $gray-500 !default;
$nav-capsule-border-radius: $border-radius !default;

// Toolbar / navbar
$navbar-padding-x: map-get($spacers, 2) !default;
$navbar-padding-y: map-get($spacers, 2) !default;
$navbar-divider-height: 30px !default;
$navbar-divider-width: 2px !default;
$navbar-divider-space: map-get($spacers, 4) !default;
$navbar-brand-font-size: $font-size-lg !default;
$navbar-brand-padding-y: 3px !default;
$navbar-brand-padding-x: map-get($spacers, 1) !default;
$navbar-img-width: 34px !default;
$navbar-dropdown-img-width: $icon-size !default;
$navbar-user-img-width: 1.875rem !default;
$navbar-user-padding-y: $nav-link-padding-y - (($navbar-user-img-width - $icon-size) * 0.5) !default;
$navbar-nav-link-padding-x: map-get($spacers, 3) * 0.5 !default;
$navbar-dark-hover-color: rgba($white, 0.9);
$navbar-dark-brand-hover-color: $navbar-dark-hover-color;
$navbar-light-hover-color: rgba($black, 0.6);
$navbar-light-brand-hover-color: $navbar-light-hover-color;
$navbar-mode: (
  "light": (
    "color": 0.6,
    "button-bg": 0.16,
    "switcher-hover": 0.6,
  ),
  "dark": (
    "color": 0.6,
    "button-bg": 0.16,
    "switcher-hover": 0.6,
  ),
) !default;
$navbar-variant: (
  "light": (
    "mode": "dark",
    "primary": $gray-100,
    "secondary": $gray-400,
    "color": $gray-800,
  ),
  "dark": (
    "mode": "light",
    "primary": $gray-800,
    "secondary": $gray-500,
    "color": $white,
  ),
) !default;

// Side nav
$sidenav-link-padding-l: map-get($spacers, 5) !default;
$sidenav-link-padding-r: map-get($spacers, 3) !default;
$sidenav-link-padding-y: 10px !default;
$sidenav-link-sm-padding-l: map-get($spacers, 2) !default;
$sidenav-link-sm-padding-r: map-get($spacers, 4) !default;
$sidenav-link-sm-padding-y: 6px !default;
$sidenav-link-active-border-width: $border-active-width !default;
$sidenav-nav-second-padding-l: 40px !default;
$sidenav-nav-third-padding-l: 24px !default;

// Spinners
$spinner-width: 32px !default;
$spinner-border-width: $border-active-width !default;
$spinner-width-lg: 48px !default;
$spinner-height-lg: $spinner-width-lg !default;
$spinner-border-width-lg: $border-active-width-lg !default;
$spinner-width-sm: 20px !default;
$spinner-border-width-sm: $border-active-width-sm !default;
$spinner-width-xs: 16px !default;
$spinner-height-xs: $spinner-width-xs !default;
$spinner-border-width-xs: $border-active-width-sm !default;

// Tables
$table-cell-padding-x: map-get($spacers, 4) !default;
$table-cell-padding-y: map-get($spacers, 5) !default;
$table-cell-padding-x-sm: $table-cell-padding-x !default;
$table-cell-padding-y-sm: map-get($spacers, 2) !default;
$table-cell-footer-padding-x: $table-cell-padding-x;
$table-cell-footer-padding-y: map-get($spacers, 3) !default;
$table-cell-footer-padding-x-sm: $table-cell-padding-x-sm !default;
$table-cell-footer-padding-y-sm: $table-cell-padding-y-sm !default;
$table-cell-vertical-align: middle !default;
$table-th-font-weight: $font-weight-semibold !default;
$table-border-radius: $border-radius !default;
$table-color: $gray-800 !default;
$table-group-separator-color: inherit !default;

// Tables - Light
$table-bg: $white !default;
$table-border-color: $gray-300 !default;
$table-head-bg: $gray-200 !default;
$table-head-color: $gray-800 !default;

// Tables - Dark
$table-dark-bg: $gray-800 !default;
$table-dark-border-color: $gray-800 !default;
$table-dark-head-bg: $gray-800 !default;
$table-dark-head-color: $white !default;

// Toasts (screen messages)
$toast-max-width: 420px !default;
$toast-padding-x: 0 !default;
$toast-padding-y: 0 !default;
$toast-font-size: $font-size-md !default;
$toast-color: $gray-800 !default;
$toast-background-color: $white !default;
$toast-border-width: 0 !default;
$toast-box-shadow: $shadow-md !default;
$toast-header-color: $gray-800 !default;
$toast-header-background-color: $white !default;
$toast-header-border-color: transparent !default;
$toast-position-top: $navbar-padding-y * 2 + $nav-link-padding-y * 2 + $line-height-base + map-get($spacers, 4) !default;
$toast-position-right: map-get($spacers, 4) !default;

// Tooltips
$tooltip-bg: $gray-900 !default;
$tooltip-opacity: 1 !default;
$tooltip-padding-x: map-get($spacers, 2) !default;
$tooltip-padding-y: map-get($spacers, 1) * 0.5 !default;
$tooltip-arrow-height: 0;
$tooltip-arrow-width: 0;

// Z-index master list
$zindex-sidenav: 1000 !default;
$zindex-toast: 1080 !default;