// Bootstrap 5.3 - Overlay Components Variables
// Modals, Tooltips, Popovers, Toasts, Offcanvas

// ============================================
// MODALS
// ============================================

$modal-inner-padding: 1rem;

$modal-footer-margin-between: 0.5rem;

$modal-dialog-margin: 0.5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;

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

$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, 0.2);
$modal-content-border-width: 1px;
$modal-content-border-radius: $radius-lg;
$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width});
$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-backdrop-bg: $black;
$modal-backdrop-opacity: 0.5;

$modal-header-border-color: $border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-header-padding-y: 1rem;
$modal-header-padding-x: 1rem;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x;

$modal-footer-bg: null;
$modal-footer-border-color: $modal-header-border-color;
$modal-footer-border-width: $modal-header-border-width;

$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;

$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform 0.3s ease-out;
$modal-scale-transform: scale(1.02);

// ============================================
// TOOLTIPS
// ============================================

$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $radius-sm;
$tooltip-opacity: 0.9;
$tooltip-padding-y: 0.25rem;
$tooltip-padding-x: 0.5rem;
$tooltip-margin: null;

$tooltip-arrow-width: 0.8rem;
$tooltip-arrow-height: 0.4rem;
$tooltip-arrow-color: null;

// ============================================
// POPOVERS
// ============================================

$popover-font-size: $font-size-sm;
$popover-bg: $white;
$popover-max-width: 276px;
$popover-border-width: 1px;
$popover-border-color: rgba($black, 0.2);
$popover-border-radius: $radius-lg;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width});
$popover-box-shadow: 0 0.5rem 1rem rgba($black, 0.15);

$popover-header-font-size: $font-size-base;
$popover-header-bg: $gray-100;
$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: 0.5rem;
$popover-body-padding-x: 0.75rem;

$popover-arrow-width: 1rem;
$popover-arrow-height: 0.5rem;
$popover-arrow-color: $popover-bg;

$popover-arrow-outer-color: rgba($black, 0.25);

// ============================================
// OFFCANVAS
// ============================================

$offcanvas-padding-y: 1rem;
$offcanvas-padding-x: 1rem;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: 0.3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $white;
$offcanvas-color: $body-color;
$offcanvas-box-shadow: 0 0.125rem 0.25rem rgba($black, 0.075);
$offcanvas-backdrop-bg: $modal-backdrop-bg;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity;