@use "sass:color";
@use "sass:math";
@use "color-vars" as colors;

// Component prefix
$prefix:                      'md-';
$prefix-bs:                   'bs-';

// Fonts
$font-size-base:              1rem;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-medium:          500;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-boldest:         900;

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

$zindex-sticky:               1020;
$spacing:                     1rem;
$gutters: (
  0: 0,
  1: $spacing * .25,
  2: $spacing * .5,
  3: $spacing,
  4: $spacing * 1.5,
  5: $spacing * 3,
);

$default-active-bgcolor:      color.change(colors.$mdb-default-color, $alpha: 0.2);
$default-hover-bgcolor:       color.change($default-active-bgcolor, $alpha: 0.1);

// Shadows
//-----------------------------
$z-depth-1:          0 2px 5px 0 oklch(0 0 0 / 0.16), 0 4px 8px 0 oklch(0 0 0 / 0.12);
$z-depth-half:       0 1px 2px 0 oklch(0.317 0 89.876 / 0.35), 0 2px 4px 2px oklch(0.145 0 89.876 / 0.05);
$z-depth-1-half:     0 5px 11px 0 oklch(0 0 0 / 0.12), 0 4px 15px 0 oklch(0 0 0 / 0.1);
$z-depth-2:          0 8px 17px 0 oklch(0 0 0 / 0.12), 0 6px 20px 0 oklch(0 0 0 / 0.1);
$z-depth-3:          0 12px 15px 0 oklch(0 0 0 / 0.1), 0 17px 50px 0 oklch(0 0 0 / 0.1);
$z-depth-4:          0 16px 28px 0 oklch(0 0 0 / 0.15), 0 25px 55px 0 oklch(0 0 0 / 0.1);
$z-depth-5:          0 15px 30px 6px oklch(0% 0 0deg / 0.1), 0 20px 50px 15px oklch(0 0 0 / 0.1);

// Grid columns
//-----------------------------
$grid-columns:                12;
$grid-gutter-width:           1.5rem;
$grid-row-columns:            6;

// Padding and margin variables
//-----------------------------
$padding-xs:                  $spacing * .25;
$padding-sm:                  $spacing * .5;
$padding-md:                  $spacing;
$padding-lg:                  $spacing * 1.5;
$padding-xl:                  $spacing * 2;

// Borders radius variables
//-----------------------------
$radius:                      .25rem;
$radius-sm:                   .375rem;
$radius-md:                   $radius * 2;
$radius-lg:                   $radius * 3;
$radius-pill:                 50rem;
$radius-circle:               50%;

// Alerts components
//-----------------------------
$alert-padding-y:             $spacing * .75;
$alert-padding-x:             $spacing;
$alert-margin-bottom:         $spacing;
$alert-border-radius:         $radius-md;
$alert-icon-spacing:          $padding-md;

// Badge components
//-----------------------------
$badge-border-radius:         $radius-sm;
$badge-font-size:             .75em;
$badge-padding-y:             .35rem;
$badge-padding-x:             .65rem;

// Breadcrumb components
//-----------------------------
$breadcrumb-padding-y:        $spacing * 0.75;
$breadcrumb-padding-x:        $padding-lg;
$breadcrumb-item-spacing:     $padding-sm;
$breadcrumb-line-height:      1.25;

// Button components
//-----------------------------
$btn-border-radius-sm:              .375rem; // 6px
$btn-border-radius-md:              .625rem; // 10px
$btn-border-radius-lg:              .875rem; // 14px
$btn-font-size-xs:                  .75rem;
$btn-font-size-sm:                  .875rem;
$btn-font-size-md:                  1rem;
$btn-font-size-lg:                  1.25rem;
$btn-fab-border-radius-xs:          $radius * 2;
$btn-fab-border-radius-sm:          $radius * 3;
$btn-fab-border-radius-md:          $radius * 4;
$btn-fab-border-radius-lg:          $radius * 6;
$btn-transition:                    color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

// Card components
//-----------------------------
$card-border-color:                 oklch(0 0 0 / 0.15);
$card-border-radius:                $radius * 3;
$card-border-width:                 1px;
$card-cap-bg:                       oklch(0 0 0 / 0.03);
$card-cap-padding-y:                $spacing * .5;
$card-cap-padding-x:                $padding-md;
$card-spacer-y:                     $padding-md;
$card-spacer-x:                     $padding-md;
$card-title-spacer-y:               $spacing * .5;

// Chip components
//-----------------------------
$chip-md-height:                    2rem;
$chip-md-font-size:                 0.9em;
$chip-sm-height:                    1.56rem;
$chip-sm-font-size:                 0.8em;
$chip-lg-height:                    3rem;
$chip-lg-font-size:                 1.2em;

// Input controls components
//-----------------------------
$checkbox-size:                     1.25rem;   // 20px;
$checkbox-touch-size:               2.5rem;    // 40px;
$checkbox-stroke:                   0.125rem;  // 2px;
$checkbox-indeterminate-width:      0.875rem;  // 14px;
$checkbox-checkmark-height:         0.8125rem; // 13px;
$checkbox-checkmark-width:          0.4375rem; // 7px;
$checkbox-margin:                   .5rem 1rem .5rem 0;

$radio-size:                        $checkbox-size;
$radio-touch-size:                  $checkbox-touch-size;
$radio-stroke:                      $checkbox-stroke;
$radio-margin:                      $checkbox-margin;

$switch-touch-size:                 $checkbox-touch-size;
$switch-thumb-size:                 $checkbox-size;
$switch-track-width:                2.375rem; // 38px;
$switch-track-height:               0.875rem; // 14px;
$switch-inset-thumb-size:           1.5rem;   // 24px;
$switch-outlined-thumb-size:        1.125rem; // 18px;
$switch-inset-track-width:          3.25rem;  // 52px;
$switch-inset-track-height:         2rem;     // 32px;
$switch-outline-stroke:             0.094rem; // 1.5px;
$switch-margin:                     .25rem .25rem;
$switch-shadows:                    0 0 6px -1px oklch(0 0 0 / 0.1), 0 1px 1px 1px oklch(0 0 0 / 0.15), 0 1px 3px 0 oklch(0 0 0 / 0.12);
$switch-disabled-shadows:           0 2px 1px -1px oklch(0 0 0 / 0.2), 0 1px 1px 0 oklch(0 0 0 / 0.14), 0 1px 3px 0 oklch(0 0 0 / 0.12);

$text-field-border-radius:            $radius-md;
$text-field-height:                   3.5rem;
$text-field-line-height:              1.5rem;
$text-field-padding-start:            $padding-md;
$text-field-padding-end:              $padding-md;
$text-field-padding-top:              1.625rem;
$text-field-padding-bottom:           0.375rem;
$text-field-classic-padding-top:      $padding-sm;
$text-field-classic-padding-bottom:   $padding-sm;
$text-field-opacity:                  .6;
$text-field-hover-opacity:            .9;
$text-field-support-text-opacity:     .65;

// MaskLoader components
//-----------------------------
$spinner-width:                     2rem;
$spinner-height:                    $spinner-width;
$spinner-vertical-align:            -.125em;
$spinner-border-width:              .25em;
$spinner-animation-speed:           .75s;

// ProgressBar components
//-----------------------------
$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       colors.$gray-200;
$progress-border-radius:            $radius-md;
$progress-box-shadow:               inset 0 1px 2px oklch(0 0 0 / 0.075);
$progress-bar-color:                colors.$white;
$progress-bar-bg:                   colors.$primary-color;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

// Tabs components
//-----------------------------
$tabs-spacing:                      .375rem;
$tabs-item-padding:                 .75rem 1.25rem;
$tabs-item-link-transition:         color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
$tabs-pills-margin:                 .75rem 1.25rem;
$tabs-material-indicator-border:    .2rem;
$tabs-material-padding:             0.75rem 1.5rem 0.75rem 1.5rem;
$tabs-modern-margin-horizontal:     .625rem 1.25rem;
$tabs-modern-margin-vertical:       .625rem;
$tabs-modern-border-radius:         $radius-pill;
$tabs-placement-top-shadow:         0px 4px 5px oklch(0 0 0 / 0.15), 0px 2px 2px oklch(0 0 0 / 0.14), 0px 3px 1px -2px oklch(0 0 0 / 0.12);
$tabs-placement-bottom-shadow:      0px -1px 5px oklch(0 0 0 / 0.2), 0px -1px 2px oklch(0 0 0 / 0.14), 0px -3px 1px -2px oklch(0 0 0 / 0.12);
$tabs-placement-left-shadow:        0px 0px 0px oklch(0 0 0 / 0.2), 2px 2px 4px oklch(0 0 0 / 0.14), 0px 2px 2px 0px oklch(0 0 0 / 0.12);
$tabs-placement-right-shadow:       0px 0px 0px oklch(0 0 0 / 0.2), -2px 0px 2px oklch(0 0 0 / 0.14), -3px 0px 1px -2px oklch(0 0 0 / 0.12);

// Tooltips components
//-----------------------------
$tooltip-max-width:                 200px;
$tooltip-color:                     colors.$white;
$tooltip-bg:                        colors.$black;
$tooltip-border-radius:             $radius;
$tooltip-font-size:                 13px;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 .25rem;
$tooltip-padding-x:                 .625rem;
$tooltip-arrow-size:                .5rem;


// Transitions variables
//-----------------------------
$transition-basic:                  all .3s ease-in-out;
$transition-hoverable:              all .55s ease-in-out;
$transition-duration-base:          .45s;
$transition-easeOut:                cubic-bezier(0.23, 1, 0.32, 1);
$transition-easeInOut:              cubic-bezier(0.445, 0.05, 0.55, 0.95);

// The default transition, used when the element is visible
// since the beginning of the animation
$transition-default-animation:      cubic-bezier(.4, 0, .2, 1);
$transition-default-duration:       $transition-duration-base;
$transition-default:                $transition-default-duration $transition-default-animation;
$transition-default-easing:         $transition-duration-base $transition-easeOut;

// The enter transition, used when the element is not visible on the screen
// since the beginning of the animation and become visible
$transition-enter-animation:        cubic-bezier(0, 0, .2, 1);
$transition-enter-duration:         $transition-duration-base;
$transition-enter:                  $transition-enter-duration $transition-enter-animation;

// The leave transition, used when the element is visible on the screen
// since the beginning of the animation and is removed
$transition-leave-animation:        cubic-bezier(.4, .0, 1, 1);
$transition-leave-duration:         $transition-duration-base;
$transition-leave:                  $transition-leave-duration $transition-leave-animation;

// The stand transition, used when the element is going to accelerate,
// like movements from bottom to top
$transition-stand-animation:        cubic-bezier(.25, .8, .50, 1);
$transition-stand-duration:         $transition-duration-base;
$transition-stand:                  $transition-stand-duration $transition-stand-animation;

// The out transition, used when the element is going to de-accelerate,
// like movements from top to bottom
$transition-drop-animation:         cubic-bezier(.55, 0, .55, .2);
$transition-drop-duration:          $transition-duration-base;
$transition-drop:                   $transition-drop-duration $transition-drop-animation;