@import "../../border/style/variables";
@import "../../box-shadow/style/variables";
@import "../../popup/style/variables";
@import "./metadata";
@import "./properties";

// Modals

$petals--dialog-border-radius: var($__petals--border-radius-lg, $petals--border-radius-lg) !default;
$petals--dialog-box-shadow: none !default;

// Padding applied to the modal body
$petals--dialog-inner-padding: 20px !default;

// Margin between elements in footer, must be lower than or equal to 2 * $petals--dialog-inner-padding
$petals--dialog-footer-margin-between: 0.5rem !default;

$petals--dialog-dialog-margin: 0.5rem !default;
$petals--dialog-dialog-margin-y-sm-up: 1.75rem !default;

$petals--dialog-title-line-height: 24px !default;

$petals--dialog-header-color: var($__petals--text-heading, $petals--text-heading) !default;

$petals--dialog-content-color: null !default;
$petals--dialog-content-bg: $__petals--white !default;
$petals--dialog-content-border-color: rgba($__petals--black, 0.2) !default;
$petals--dialog-content-border-width: $petals--border-width !default;
$petals--dialog-content-border-radius: $petals--border-radius-lg !default;
$petals--dialog-content-inner-border-radius: subtract(
  $petals--dialog-content-border-radius,
  $petals--dialog-content-border-width
) !default;
$petals--dialog-content-box-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
$petals--dialog-content-box-shadow-sm-up: $petals--box-shadow !default;

$petals--dialog-backdrop-bg: var($__petals--popup-backdrop-bg, $petals--popup-backdrop-bg) !default;
$petals--dialog-backdrop-opacity: var($__petals--popup-backdrop-opacity, $petals--popup-backdrop-opacity) !default;
$petals--dialog-header-border-color: $petals--border-color !default;
$petals--dialog-footer-border-color: $petals--dialog-header-border-color !default;
$petals--dialog-header-border-width: $petals--dialog-content-border-width !default;
$petals--dialog-footer-border-width: $petals--dialog-header-border-width !default;
$petals--dialog-header-padding-y: 1rem !default;
$petals--dialog-header-padding-x: 1rem !default;
$petals--dialog-header-padding: $petals--dialog-header-padding-y $petals--dialog-header-padding-x !default; // Keep this for backwards compatibility

$petals--dialog-xl: 1140px !default;
$petals--dialog-lg: 800px !default;
$petals--dialog-md: 500px !default;
$petals--dialog-sm: 300px !default;

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