// Color system

$light: $gray-50 !default;
$dark: $gray-800 !default;

$blue: map-get($blue-colors, 600) !default;
$indigo: map-get($indigo-colors, 600) !default;
$purple: map-get($purple-colors, 600) !default;
$pink: map-get($pink-colors, 600) !default;
$red: map-get($red-colors, 600) !default;
$orange: map-get($orange-colors, 600) !default;
$yellow: map-get($yellow-colors, 600) !default;
$green: map-get($green-colors, 600) !default;
$teal: map-get($teal-colors, 600) !default;
$cyan: map-get($cyan-colors, 600) !default;

$primary-colors: $blue-colors !default;
$secondary-colors: $gray-colors !default;
$success-colors: $green-colors !default;
$info-colors: $cyan-colors !default;
$warning-colors: $yellow-colors !default;
$danger-colors: $red-colors !default;

$map-theme-colors: (
    "primary": $primary-colors,
    "secondary": $secondary-colors,
    "success": $success-colors,
    "info": $info-colors,
    "warning": $warning-colors,
    "danger": $danger-colors,
) !default;

$primary: map-get($primary-colors, 600) !default;

$min-contrast-ratio: 2.5 !default;

// Options

$enable-caret: false !default;
$enable-rfs: false !default;
$enable-shadows: true !default;

$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;

// 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 * 1.75,
    8: $spacer * 2,
) !default;

// Body

$body-bg: $gray-100 !default;
$body-color: $gray-900 !default;

$border-width: 0.0625rem !default;
$border-color: $gray-300 !default;

// Links

$link-color: $blue-500 !default;
$link-hover-color: $blue-600 !default;

// Paragraphs

// Grid breakpoints

// Grid containers

// Grid columns

// Container padding

// Components

$border-radius: 0.375rem !default;
$border-radius-sm: 0.25rem !default;
$border-radius-lg: 0.625rem !default;
$border-radius-xl: 0.75rem !default;

$box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !default;
$box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05) !default;
$box-shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !default;
$box-shadow-inset: $box-shadow-sm !default;

$box-shadow-ring-width: 0.125rem !default;
$box-shadow-ring: 0 0 0 $box-shadow-ring-width var(--#{$prefix}shadow-ring-space-color),
    0 0 0 ($box-shadow-ring-width * 2) var(--#{$prefix}shadow-ring-color) !default;

$caret-vertical-align: 0.125rem !default;
$caret-spacing: 0.25rem !default;

$component-active-bg: $primary !default;
$component-active-color-lt: $body-color !default;
$component-active-bg-lt: map-get($primary-colors, 100) !default;

// Typography

$font-family-sans-serif: "Inter var", ui-sans-serif, system-ui, -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: 0.875rem !default;
$font-size-sm: 0.75rem !default;
$font-size-lg: 1rem !default;

$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semibold: 500 !default;
$font-weight-bold: 600 !default;
$font-weight-bolder: bolder !default;

$line-height-base: 1.25rem !default;
$line-height-sm: 1.125rem !default;
$line-height-lg: 1.5rem !default;
$line-height-xs: 1 !default;

$font-weight-semibold: 600 !default;

$h1-font-size: $font-size-lg * 2.25 !default;
$h2-font-size: $font-size-lg * 1.875 !default;
$h3-font-size: $font-size-lg * 1.5 !default;
$h4-font-size: $font-size-lg * 1.25 !default;
$h5-font-size: $font-size-lg * 1.125 !default;
$h6-font-size: $font-size-lg !default;

// Tables

$table-thead-bg: $gray-100 !default;

$table-striped-bg: $gray-50 !default;
$table-hover-bg: $gray-100 !default;

// Buttons + Forms

$input-btn-focus-width: 0.0625rem !default;
$input-btn-focus-color-opacity: 1 !default;
// $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
// $input-btn-focus-blur:0 !default;
// $input-btn-focus-box-shadow:0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;

$input-btn-padding-y: map-get($spacers, 2) - (0.125rem * 0.5) !default;
$input-btn-padding-x: map-get($spacers, 3) !default;
$input-btn-line-height: $line-height-base !default;

$input-btn-padding-y-sm: 0.125rem !default;
$input-btn-padding-x-sm: 0.625rem !default;
$input-btn-font-size-sm: $font-size-sm !default;

$input-btn-padding-y-lg: 0.75rem !default;
$input-btn-padding-x-lg: 1.25rem !default;
$input-btn-font-size-lg: $font-size-lg * 1.125 !default;

// Buttons

$btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;

$btn-font-weight: 500 !default;

$btn-box-shadow: $box-shadow-sm !default;
$btn-active-box-shadow: $box-shadow-ring !default;

$btn-default-light-bg: transparent !default;
$btn-default-light-color: $gray-700 !default;
$btn-default-light-border-color: $gray-300 !default;
$btn-default-light-hover-bg: transparent !default;
$btn-default-light-hover-color: $gray-900 !default;
$btn-default-light-hover-border-color: $gray-400 !default;

$btn-default-dark-bg: transparent !default;
$btn-default-dark-color: $gray-300 !default;
$btn-default-dark-border-color: $gray-700 !default;
$btn-default-dark-hover-bg: transparent !default;
$btn-default-dark-hover-color: $gray-200 !default;
$btn-default-dark-hover-border-color: $gray-500 !default;

$btn-padding-y-xs: .125rem !default;
$btn-padding-x-xs: .5rem !default;

// Forms

$form-label-font-weight: 500 !default;

$input-height-inner: $line-height-base;
$input-height-inner-half: $line-height-sm;
$input-height-inner-quarter: $line-height-lg;

$input-height: $line-height-base;
$input-height-sm: $line-height-sm;
$input-height-lg: $line-height-lg;

$input-bg: $white !default;
$input-disabled-bg: $gray-100 !default;
$input-focus-border-color: $component-active-bg !default;
$input-border-color: $border-color !default;

$input-placeholder-color: $gray-500 !default;

$form-check-space: 0.5rem !default;
$form-check-input-width: 1rem !default;
$form-check-min-height: $line-height-base !default;
$form-check-padding-start: $form-check-input-width + $form-check-space !default;
$form-check-margin-bottom: 0.5rem !default;

$form-check-input-focus-box-shadow: $box-shadow-ring !default;
$input-shadow-ring-color: $component-active-bg !default;

$form-select-indicator-color: $gray-500 !default;
$input-group-addon-bg: $gray-50 !default;

$form-check-label-color: $body-color !default;
$form-check-label-font-weight: 500 !default;
$form-check-color: $gray-500 !default;

$form-hint-space: 0.25rem !default;
$form-hint-color: $gray-500 !default;

$form-label-required-space: 0.25rem !default;
$form-label-required-color: map-get($danger-colors, 600) !default;

$input-icon-width: 1.25rem !default;

// Form validation

$form-feedback-icon-valid-color: map-get($success-colors, 600);
$form-feedback-icon-invalid-color: map-get($danger-colors, 600);

$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='#{$form-feedback-icon-valid-color}' class='w-6 h-6'><path stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /></svg>") !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='#{$form-feedback-icon-invalid-color}' class='w-6 h-6'><path stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z' /></svg>") !default;

// Navs

$nav-link-padding-y: 0.625rem !default;
$nav-link-padding-x: 0.625rem !default;
$nav-link-font-weight: 500 !default;

$nav-link-color: $gray-500 !default;
$nav-link-hover-color: $gray-800 !default;
$nav-link-disabled-color: $gray-400 !default;

$nav-tabs-border-width: 0.125rem !default;
$nav-tabs-border-radius: 0 !default;

$nav-tabs-link-hover-border-color: $gray-300 !default;
$nav-tabs-link-active-bg: transparent !default;
$nav-tabs-link-active-border-color: $primary !default;

$nav-pills-link-active-bg: $component-active-bg-lt !default;

// custom
$nav-link-content-space: 0.25rem !default;
$nav-link-icon-size: 1.25rem !default;
$nav-link-icon-space: 0.5rem !default;

$nav-pills-link-hover-bg: $gray-50 !default;

$nav-pills-dark-link-active-bg: map-get($gray-colors, 900) !default;
$nav-pills-dark-link-hover-bg: map-get($gray-colors, 700) !default;

$nav-divider-bg: $gray-300 !default;
$nav-divider-dark-bg: $gray-700 !default;
$nav-divider-margin-y: $spacer * 0.5 !default;

$nav-avatar-width: 1.75rem !default;
$nav-avatar-font-size: $font-size-sm !default;

// Navbar

$navbar-height: 4rem !default;
$navbar-padding-y: 0 !default;

$navbar-brand-height: 2rem !default;
$navbar-brand-font-size: $font-size-lg * 1.375 !default;
$navbar-brand-padding-y: ($navbar-height - $navbar-brand-height) * 0.5 !default;
$navbar-brand-margin-end: 1rem !default;

$navbar-toggler-padding-y: 0.4375rem !default;
$navbar-toggler-padding-x: 0.4375rem !default;

$navbar-nav-link-padding-x: $nav-link-padding-x !default;
$nav-link-height: $line-height-base + $nav-link-padding-y * 2 !default;

$navbar-light-toggler-border-color: transparent !default;
$navbar-dark-toggler-border-color: transparent !default;

$navbar-light-color: $gray-500 !default;
$navbar-light-hover-color: $gray-700 !default;
$navbar-light-active-color: $gray-900 !default;
$navbar-light-disabled-color: $gray-400 !default;
$navbar-light-toggler-border-color: $gray-100 !default;

$navbar-dark-color: $gray-500 !default;
$navbar-dark-hover-color: $gray-400 !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: $gray-700 !default;
$navbar-dark-brand-color: $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;

// constom
$navbar-brand-margin-start: 0.5rem !default;
$navbar-nav-item-space: 0.25rem !default;

// Sidenav

$sidenav-width: 16rem !default;
$sidenav-padding-y: 0.5rem !default;
$sidenav-padding-x: 1.25rem !default;
$sidenav-border-width: 0 !default;
$sidenav-border-color: none !default;

$sidenav-tabs-border-width: 0.25rem !default;

$sidenav-light-tabs-link-hover-bg: $gray-50 !default;
$sidenav-light-tabs-link-hover-border-color: $nav-tabs-link-hover-border-color !default;
$sidenav-light-tabs-link-active-bg: $component-active-bg-lt !default;
$sidenav-light-tabs-link-active-border-color: $nav-tabs-link-active-border-color !default;

$sidenav-dark-tabs-link-hover-bg: $gray-700 !default;
$sidenav-dark-tabs-link-hover-border-color: $nav-tabs-link-hover-border-color !default;
$sidenav-dark-tabs-link-active-bg: $gray-900 !default;
$sidenav-dark-tabs-link-active-border-color: $nav-tabs-link-active-border-color !default;

$sidenav-light-pills-link-hover-bg: $gray-50 !default;
$sidenav-light-pills-link-active-bg: $component-active-bg-lt !default;

$sidenav-dark-pills-link-hover-bg: $gray-700 !default;
$sidenav-dark-pills-link-active-bg: $gray-900 !default;

// Dropdowns

$dropdown-min-width: 12rem !default;
$dropdown-border-color: none !default;
$dropdown-padding-y: 0.25rem !default;

$dropdown-divider-bg: $gray-300 !default;
$dropdown-divider-margin-y: $spacer * 0.25 !default;

$dropdown-link-hover-bg: $gray-50 !default;

$dropdown-item-padding-y: $spacer * 0.5 !default;
$dropdown-item-padding-x: $spacer !default;

// Pagination

$pagination-bg: transparent !default;
$pagination-hover-bg: $gray-50 !default;
$pagination-focus-bg: $gray-50 !default;
$pagination-disabled-bg: transparent !default;

$pagination-color: $gray-600 !default;
$pagination-hover-color: $gray-800 !default;
$pagination-focus-color: $gray-800 !default;
$pagination-disabled-color: $gray-400 !default;
$pagination-focus-box-shadow: 0 !default;

$pagination-border-width: 0 !default;
$pagination-font-weight: $font-weight-semibold !default;

// Placeholders

// Cards

$card-spacer-y: map-get($spacers, 4) !default;
$card-spacer-x: map-get($spacers, 5) !default;

$card-title-spacer-y: map-get($spacers, 2) !default;

$card-cap-padding-y: map-get($spacers, 2) !default;
$card-cap-bg: $gray-50 !default;

$card-border-width: 0 !default;
$card-border-radius: $border-radius-lg !default;
$card-box-shadow: $box-shadow !default;

// Accordion

// Tooltips

// Popovers

// Toasts

// Badges

$badge-font-weight: $font-weight-semibold !default;

$badge-padding-y: 0.334em !default;
$badge-padding-x: 0.75em !default;

// Modals

$modal-inner-padding: $card-spacer-x;

$modal-footer-margin-between: 0 !default;

$modal-content-border-width: 0 !default;
$modal-footer-bg: $gray-50 !default;

$modal-header-padding-y: $modal-inner-padding * .75 !default;

$modal-footer-padding-y: $card-spacer-y * .75 !default;
$modal-footer-padding-x: $card-spacer-x !default;

// Alerts

$alert-padding-y: map-get($spacers, 3) !default;
$alert-padding-x: map-get($spacers, 5) !default;

$alert-bg-scale: -80% !default;
$alert-border-scale: -80% !default;

$alert-border-width: 0 !default;

// Progress bars

// List group

// Image thumbnails

// Figures

// Breadcrumbs

// Carousel

// Spinners

// Close

// Offcanvas

// Code

// add

$letter-spacing: 0.05em;

$sizes: (
    1: 0.25rem,
    2: 0.5rem,
    3: 0.75rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    7: 1.75rem,
    8: 2rem,
    9: 2.25rem,
    10: 2.5rem,
    11: 2.75rem,
    12: 3rem,
) !default;

$max-width: (
    xs: 20rem, /* 320px */
    sm: 24rem, /* 384px */
    md: 28rem, /* 448px */
    lg: 32rem, /* 512px */
) !default;