// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

//
// Color system
//

// stylelint-disable

$white:#fff;
$gray-100: #bfc5ca ;
$gray-200: #e9ecef ;
$gray-300: #dee2e6 ;
$gray-400: #dee2e6 ;
$gray-500: #adb5bd ;
$gray-600: #e9ecf0 ;
$gray-700: #495057 ;
$gray-800: #0f0f0f ;
$gray-900: #757575 ;
$black: #0f0f0f ;
$title-color:#212529;

$blue: #FF69B4 ;
$green: #36be4f ;
$yellow: #f3bb2d ;
$red: #FF1493 ;
$cyan: #FF69B4 ;
$indigo: #FF69B4 ;
$purple: #C71585 ;
$pink: #FF1493 ;
$orange: #fd7e14 ;
$teal: #FF69B4 ;
$primary-light:#FF69B4;
$primary-dark:#C71585;
$secondary-light:#FFC0CB;
$secondary-dark:#FFB6C1;
$success-light:#2ac046;
$success-dark:#28b542;
$danger-light:#ff2330;
$danger-dark:#ff1624;
$warning-light:#d99e00;
$warning-dark:#cc9500;
$info-light :#2a8cff;
$info-dark :#1d86ff;
$light-light:#cad2d9;
$light-dark:#c2ccd4;
$dark-light:#0f0f0f;




$colors: ();
$colors: map-merge(
    (
        "blue": $blue,
        "indigo": $indigo,
        "purple": $purple,
        "pink": $pink,
        "red": $red,
        "orange": $orange,
        "yellow": $yellow,
        "green": $green,
        "teal": $teal,
        "cyan": $cyan,
        "white": $white,
        "gray": $gray-600,
        "gray-dark": $gray-800
    ),
    $colors
);

$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-800;


$theme-colors: () ;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
    (
        "primary": $primary,
        "secondary": $secondary,
        "success": $success,
        "info": $info,
        "warning": $warning,
        "danger": $danger,
        "light": $light,
        "dark": $dark
    ),
    $theme-colors
);


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

$enable-shadows: true;


// Spacing

$spacer: 1rem;

// Body
//
// Settings for the `<body>` element.

$body-color: $gray-900;

// Links
//
// Style anchor elements.

$link-color: $primary;
$link-decoration: none;
$link-hover-color: shade-color($link-color, 15%);
$link-hover-decoration: underline;

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

$grid-gutter-width: 30px ;

$line-height-lg: 1.5;
$line-height-sm: 1.5;

$border-width: 1px ;
$border-color: $gray-300;

$border-radius: 0.25rem;
$border-radius-lg: 0.3rem;
$border-radius-sm: 0.2rem;


$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) ;
$box-shadow: 0 2px 7px 0px rgba(154, 161, 171, 0.15) ;
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) ;

$component-active-color: $white ;
$component-active-bg: $primary;

$caret-width: 0.3em ;
$caret-vertical-align: $caret-width * 0.85 ;
$caret-spacing: $caret-width * 0.85 ;

$transition-base: all 0.2s ease-in-out ;
$transition-fade: opacity 0.15s linear ;
$transition-collapse: height 0.35s ease ;

$embed-responsive-aspect-ratios: () ;
// stylelint-disable-next-line scss/dollar-variable-default
$embed-responsive-aspect-ratios: join(
    ((21 9), (16 9), (4 3), (1 1)),
    $embed-responsive-aspect-ratios
);

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

// stylelint-disable value-keyword-case
$font-family-sans-serif: "Nunito", sans-serif;
$font-family-monospace: "Operator Mono", "Fira Code", SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
// stylelint-enable value-keyword-case

$font-size-base: 1rem ; // Assumes the browser default, typically `16px`
$font-size-lg: $font-size-base * 1.25 ;
$font-size-sm: $font-size-base * 0.875 ;

$font-weight-bold: 700 ;
$line-height-base: 1.7 ;

$h1-font-size: 2.25rem ;
$h2-font-size: 2rem ;
$h3-font-size: 1.75rem ;
$h4-font-size: 1.5rem ;
$h5-font-size: 1.125rem ;
$h6-font-size: $font-size-base ;

$headings-margin-bottom: $spacer / 2 ;
$headings-color: $title-color ;

$display1-size: 6rem ;
$display2-size: 5.5rem ;
$display3-size: 4.5rem ;
$display4-size: 3.5rem ;

$lead-font-weight: 300 ;

$small-font-size: 80% ;

$text-muted: $gray-100 ;

$hr-border-color: rgba($black, 0.1) ;
$hr-border-width: $border-width ;

$mark-padding: 0.2em ;

$nested-kbd-font-weight: $font-weight-bold ;

$mark-bg: #fcf8e3 ;

$hr-margin-y: 0 ;

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

$table-cell-padding-y:1rem;
$table-cell-padding-x:1.5rem;
$table-cell-padding-x-sm: 0.3rem ;
$table-cell-padding-y-sm: 0.3rem ;

$table-color: $body-color;
$table-th-font-weight:bold;

$table-bg-scale:              -80% !default;
// scss-docs-end table-variables

// scss-docs-start table-loop
$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      shift-color($light,$table-bg-scale),
  "dark":       $dark,
);
// scss-docs-end table-loop



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

$input-btn-padding-y: 0.375rem ;
$input-btn-padding-x: 0.75rem ;
$input-btn-font-family: null ;
$input-btn-font-size: $font-size-base ;
$input-btn-line-height: $line-height-base ;

$input-btn-focus-width: 0 ;
$input-btn-focus-color: rgba($component-active-bg, 0.25) ;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color ;

$input-btn-padding-y-sm: 0.25rem ;
$input-btn-padding-x-sm: 0.5rem ;
$input-btn-font-size-sm: $font-size-sm ;
$input-btn-line-height-sm: $line-height-sm ;

$input-btn-padding-y-lg: 0.5rem ;
$input-btn-padding-x-lg: 1rem ;
$input-btn-font-size-lg: $font-size-lg ;
$input-btn-line-height-lg: $line-height-lg ;

$input-btn-border-width: $border-width ;

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

$btn-padding-y: $input-btn-padding-y ;
$btn-padding-x: $input-btn-padding-x ;
$btn-font-family: $input-btn-font-family ;
$btn-font-size: $input-btn-font-size ;
$btn-line-height: $input-btn-line-height ;

$btn-padding-y-sm: $input-btn-padding-y-sm ;
$btn-padding-x-sm: $input-btn-padding-x-sm ;
$btn-font-size-sm: $input-btn-font-size-sm ;
$btn-line-height-sm: $input-btn-line-height-sm ;

$btn-padding-y-lg: $input-btn-padding-y-lg ;
$btn-padding-x-lg: $input-btn-padding-x-lg ;
$btn-font-size-lg: $input-btn-font-size-lg ;
$btn-line-height-lg: $input-btn-line-height-lg ;

$btn-border-width: $input-btn-border-width ;


$btn-box-shadow: none ;
$btn-focus-width: $input-btn-focus-width ;
$btn-focus-box-shadow: none ;
$btn-disabled-opacity: 0.65 ;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) ;

$btn-link-disabled-color: $gray-600 ;

$btn-block-spacing-y: 0.5rem ;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius ;
$btn-border-radius-lg: $border-radius-lg ;
$btn-border-radius-sm: $border-radius-sm ;

$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out ;

 $btn-hover-bg-shade-amount: 7.5% ;


// Forms

$label-margin-bottom: 0.5rem ;

$input-padding-y: $input-btn-padding-y ;
$input-padding-x: $input-btn-padding-x ;
$input-font-family: $input-btn-font-family ;
$input-font-size: 14px ;
$input-line-height: $input-btn-line-height ;

$input-padding-y-sm: $input-btn-padding-y-sm ;
$input-padding-x-sm: $input-btn-padding-x-sm ;
$input-font-size-sm: $input-btn-font-size-sm ;
$input-line-height-sm: $input-btn-line-height-sm ;

$input-padding-y-lg: $input-btn-padding-y-lg ;
$input-padding-x-lg: $input-btn-padding-x-lg ;
$input-font-size-lg: $input-btn-font-size-lg ;
$input-line-height-lg: $input-btn-line-height-lg ;

$input-bg: $white ;
$input-disabled-bg: $gray-200 ;

$input-color: #555 ;
$input-border-color: $gray-400 ;
$input-border-width: $input-btn-border-width ;
$input-box-shadow: none ;

$input-border-radius: $border-radius ;
$input-border-radius-lg: $border-radius-lg ;
$input-border-radius-sm: $border-radius-sm ;

$input-focus-bg: $input-bg ;
$input-focus-border-color: lighten($component-active-bg, 25%) ;
$input-focus-color: $input-color ;
$input-focus-width: $input-btn-focus-width ;
$input-focus-box-shadow: $input-btn-focus-box-shadow ;

$input-placeholder-color: $gray-600 ;
$input-plaintext-color: $body-color ;

$input-height-border: $input-border-width * 2 ;

$input-height-inner: calc(
    #{$input-line-height * 1em} + #{$input-padding-y * 2}
) ;
$input-height-inner-half: calc(
    #{$input-line-height * 0.5em} + #{$input-padding-y}
) ;
$input-height-inner-quarter: calc(
    #{$input-line-height * 0.25em} + #{$input-padding-y / 2}
) ;

$input-height: auto ;
$input-height-sm: calc(
    #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}
) ;
$input-height-lg: calc(
    #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}
) ;

$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out ;

$form-text-margin-top: 0.25rem ;

$form-check-input-gutter: 1.25rem ;
$form-check-input-margin-y: 0.3rem ;
$form-check-input-margin-x: 0.25rem ;

$form-check-inline-margin-x: 0.75rem ;
$form-check-inline-input-margin-x: 0.3125rem ;

$form-grid-gutter-width: 10px ;
$form-group-margin-bottom: 1rem ;

$input-group-addon-color: $input-color ;
$input-group-addon-bg: $gray-200 ;
$input-group-addon-border-color: $input-border-color ;


// scss-docs-start form-file-variables
$form-file-button-color:          $input-color;
$form-file-button-bg:            $secondary;
$form-file-button-hover-bg:      #d2d4d8;
// scss-docs-end form-file-variables

// Form validation


$form-feedback-font-size: $small-font-size;
$form-feedback-valid-color: $success;
$form-feedback-invalid-color: $danger;

$form-feedback-icon-valid-color: $form-feedback-valid-color;
$form-feedback-icon-valid: str-replace(
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"),
    "#",
    "%23"
) ;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
$form-feedback-icon-invalid: str-replace(
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"),
    "#",
    "%23"
) ;

$form-validation-states: () ;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
    (
        "valid": (
            "color": $form-feedback-valid-color,
            "icon": $form-feedback-icon-valid
        ),
        "invalid": (
            "color": $form-feedback-invalid-color,
            "icon": $form-feedback-icon-invalid
        )
    ),
    $form-validation-states
);

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.


$zindex-modal-backdrop: 1040 ;
$zindex-modal: 1050 ;
$zindex-popover: 1060 ;
$zindex-tooltip: 1070 ;

// Navs

$nav-link-padding-y: 0.5rem;
$nav-link-color:#6C757D;
$nav-link-disabled-color: $gray-600;

$nav-tabs-border-color: $primary;
$nav-tabs-border-width: $border-width;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color: $primary;
$nav-tabs-link-active-bg: $white;
$nav-tabs-link-active-border-color: $primary $primary $nav-tabs-link-active-bg;

$nav-pills-border-radius: $border-radius;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;

$nav-divider-color: $primary;
$nav-divider-margin-y: $spacer / 2;

// Navbar

$navbar-padding-y: $spacer / 2;
$navbar-padding-x: $spacer;



$navbar-brand-font-size: $font-size-lg ;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 ;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base ;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 ;



$navbar-dark-color: rgba($white, 0.5) ;
$navbar-dark-toggler-icon-bg: str-replace(
    url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"),
    "#",
    "%23"
) ;


$navbar-light-color: rgba($black, 0.5) ;
$navbar-light-hover-color: rgba($black, 0.7) ;
$navbar-light-active-color: rgba($black, 0.9) ;
$navbar-light-disabled-color: rgba($black, 0.3) ;
$navbar-light-toggler-icon-bg: str-replace(
    url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"),
    "#",
    "%23"
) ;
$navbar-light-toggler-border-color: rgba($black, 0.1) ;

$navbar-light-brand-color: $navbar-light-active-color ;
$navbar-light-brand-hover-color: $navbar-light-active-color ;


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


$dropdown-font-size: $font-size-base ;
$dropdown-color: $body-color ;
$dropdown-bg: $white ;
$dropdown-border-color: rgba($black, 0.15) ;
$dropdown-border-radius: $border-radius ;
$dropdown-border-width: 0 ;
$dropdown-inner-border-radius: calc(
    #{$dropdown-border-radius} - #{$dropdown-border-width}
) ;
$dropdown-divider-bg: $gray-200 ;
$dropdown-divider-margin-y: $nav-divider-margin-y ;
$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) ;

$dropdown-link-color: $gray-900 ;
$dropdown-link-hover-color: shade-color($gray-900, 5%) ;
$dropdown-link-hover-bg: $gray-600 ;

$dropdown-link-active-color: $component-active-color ;
$dropdown-link-active-bg: $component-active-bg ;

$dropdown-link-disabled-color: $gray-600 ;

$dropdown-item-padding-y: 0.25rem ;
$dropdown-item-padding-x: 1.5rem ;

$dropdown-header-color: $gray-600 ;

// Pagination

$pagination-padding-y: 0.5rem ;

$pagination-color: $link-color ;
$pagination-bg: $white ;
$pagination-border-width: $border-width ;
$pagination-border-color: $gray-300 ;

$pagination-focus-box-shadow: none ;
$pagination-focus-outline: 0 ;

$pagination-hover-color: $link-hover-color ;
$pagination-hover-bg: $gray-200 ;
$pagination-hover-border-color: $gray-300 ;

$pagination-active-color: $component-active-color ;
$pagination-active-bg: $component-active-bg ;
$pagination-active-border-color: $pagination-active-bg ;

$pagination-disabled-color: $gray-600 ;
$pagination-disabled-bg: $white ;
$pagination-disabled-border-color: $gray-300 ;


// Cards

$card-spacer-y: 0.75rem ;
$card-spacer-x: 1.25rem ;
$card-title-color:$title-color;
$card-border-width: $border-width;
$card-border-radius: $border-radius ;
$card-border-color: rgba($black, 0.125) ;
$card-inner-border-radius: calc(
    #{$card-border-radius} - #{$card-border-width}
) ;
$card-cap-bg: rgba($black, 0.03) ;

$card-bg: $white ;

$card-img-overlay-padding: 1.25rem ;

$card-group-margin: $grid-gutter-width / 2 ;

// Tooltips

$tooltip-color: $white ;
$tooltip-bg: $black ;
$tooltip-border-radius: $border-radius ;

$tooltip-padding-y: 0.25rem ;
$tooltip-padding-x: 0.5rem ;
$tooltip-margin: 0 ;

$tooltip-arrow-color: $tooltip-bg ;

// Form tooltips must come after regular tooltips
$form-feedback-tooltip-padding-y: $tooltip-padding-y ;
$form-feedback-tooltip-padding-x: $tooltip-padding-x ;

$form-feedback-tooltip-line-height: $line-height-base ;

$form-feedback-tooltip-border-radius: $tooltip-border-radius ;

// Popovers


$popover-bg: $white ;
$popover-border-width: $border-width ;
$popover-border-color: rgba($black, 0.2) ;
$popover-border-radius: $border-radius-lg ;
$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) ;

$popover-header-bg: shade-color($popover-bg, 3%) ;
$popover-header-color: $headings-color ;
$popover-header-padding-y: 0.5rem ;
$popover-header-padding-x: 0.75rem ;

$popover-body-color: $body-color ;
$popover-body-padding-y: $popover-header-padding-y ;
$popover-body-padding-x: $popover-header-padding-x ;

$popover-arrow-color: $popover-bg ;

$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) ;

// Toasts

$toast-padding-y: 0.25rem ;
$toast-background-color: rgba($white, 0.85) ;
$toast-border-width: 1px ;
$toast-border-color: rgba(0, 0, 0, 0.1) ;
$toast-border-radius: 0.25rem ;
$toast-box-shadow: 0 0.25rem 0.75rem rgba($black, 0.1) ;

$toast-header-color: $gray-600 ;
$toast-header-background-color: rgba($white, 0.85) ;
$toast-header-border-color: rgba(0, 0, 0, 0.05) ;

// Badges

$badge-font-size: 75% ;
$badge-padding-y: 0.25em ;
$badge-padding-x: 0.4em ;
$badge-border-radius: $border-radius ;


// Modals

// Padding applied to the modal body
$modal-inner-padding: 1rem ;


$modal-title-line-height: $line-height-base ;

$modal-content-bg: $white ;
$modal-content-border-color: rgba($black, 0.2) ;
$modal-content-border-width: $border-width ;
$modal-content-border-radius: $border-radius-lg ;
$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) ;
$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) ;

$modal-header-border-color: $border-color ;
$modal-footer-border-color: $modal-header-border-color ;
$modal-header-border-width: $modal-content-border-width ;
$modal-footer-border-width: $modal-header-border-width ;
$modal-header-padding-y: 1rem ;
$modal-header-padding-x: 1rem ;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x ; // Keep this for backwards compatibility


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

$alert-padding-y: 0.75rem ;
$alert-padding-x: 1.25rem ;
$alert-border-radius: $border-radius ;

$alert-bg-level: -10 ;
$alert-border-level: -9 ;
$alert-color-level: 6 ;

// Progress bars

$progress-height: 12px ; //in bs5 1rem = 12px
$progress-bg: $gray-200 ;
$progress-border-radius: $border-radius ;
$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) ;
$progress-bar-color: $white ;
$progress-bar-bg: map-get($theme-colors, primary);

// List group

$list-group-color: null ;
$list-group-bg: $white ;
$list-group-border-color: rgba($black, 0.125) ;
$list-group-border-width: $border-width ;
$list-group-border-radius: $border-radius ;

$list-group-item-padding-y: 0.75rem ;
$list-group-item-padding-x: 1.25rem ;

$list-group-hover-bg: $gray-100 ;
$list-group-active-color: $component-active-color ;
$list-group-active-bg: $component-active-bg ;
$list-group-active-border-color: $list-group-active-bg ;

$list-group-disabled-color: $gray-600 ;
$list-group-disabled-bg: $list-group-bg ;

$list-group-action-color: $gray-700 ;
$list-group-action-hover-color: $list-group-action-color ;

$list-group-action-active-color: $body-color ;
$list-group-action-active-bg: $gray-200 ;

// Image thumbnails

$thumbnail-bg: $white;
$thumbnail-border-width: $border-width ;
$thumbnail-border-color: $gray-300 ;
$thumbnail-border-radius: $border-radius ;
$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) ;

// Figures

$figure-caption-font-size: 90% ;
$figure-caption-color: $gray-600 ;

// Breadcrumbs

$breadcrumb-padding-y: 0.75rem ;
$breadcrumb-padding-x: 1rem ;
$breadcrumb-item-padding: 0.5rem ;

$breadcrumb-margin-bottom: 1rem ;

$breadcrumb-bg: transaparent ;
$breadcrumb-divider-color: $gray-600 ;
$breadcrumb-active-color: $gray-600 ;
$breadcrumb-divider: quote("/") ;

$breadcrumb-border-radius: $border-radius ;

// Carousel
$carousel-control-color:$white;

$carousel-control-icon-width: 20px ;

$carousel-control-prev-icon-bg: str-replace(
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"),
    "#",
    "%23"
) ;
$carousel-control-next-icon-bg: str-replace(
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"),
    "#",
    "%23"
) ;


// Code
$code-font-size: 87.5% ;
$code-color: $black ;

$kbd-padding-y: 0.2rem ;
$kbd-padding-x: 0.4rem ;
$kbd-font-size: $code-font-size ;
$kbd-color: $white ;
$kbd-bg: $gray-900 ;

$pre-color: $gray-900 ;
$pre-scrollable-max-height: 340px ;