@use '@tokens' as tokens;
@use '../../settings/transitions';

$breakpoints: tokens.$breakpoints;
$padding-x: tokens.$space-900;
$padding-x-tablet: tokens.$space-1400;
$padding-y: tokens.$space-700;
$typography: tokens.$body-medium-regular;
$transition-duration: transitions.$duration-200;
$transition-scale-ratio: transitions.$scale-ratio-large-objects;
$transition-shift-distance: transitions.$shift-distance-medium;

$backdrop-background-color: tokens.$background-backdrop;

$common-padding-x: tokens.$space-900;
$common-padding-x-tablet: tokens.$space-1000;

// ModalDialog
$dialog-width: 640px;
$dialog-width-desktop: 680px;
$dialog-height: auto;
$dialog-max-height: none;
$dialog-text-color: tokens.$text-primary;
$dialog-border-radius: tokens.$radius-300;
$dialog-background-color: tokens.$background-primary;
$dialog-shadow: tokens.$shadow-300;

$_dialog-scrollable-default-height: min-content;
$_dialog-scrollable-default-max-height: 600px;

$dialog-scrollable-height: var(--modal-dialog-height, #{$_dialog-scrollable-default-height});
$dialog-scrollable-height-tablet: var(
    --modal-dialog-height-tablet,
    var(--modal-dialog-height, #{$_dialog-scrollable-default-height})
);
$dialog-scrollable-height-desktop: var(
    --modal-dialog-height-desktop,
    var(--modal-dialog-height-tablet, var(--modal-dialog-height, #{$_dialog-scrollable-default-height}))
);
$dialog-scrollable-max-height: min(
    var(--modal-dialog-max-height, #{$_dialog-scrollable-default-max-height}),
    calc(100dvh - #{2 * $padding-y})
);
$dialog-scrollable-max-height-tablet: min(
    var(--modal-dialog-max-height-tablet, var(--modal-dialog-max-height, #{$_dialog-scrollable-default-max-height})),
    calc(100dvh - #{2 * $padding-y})
);
$dialog-scrollable-max-height-desktop: min(
    var(
        --modal-dialog-max-height-desktop,
        var(--modal-dialog-max-height-tablet, var(--modal-dialog-max-height, #{$_dialog-scrollable-default-max-height}))
    ),
    calc(100dvh - #{2 * $padding-y})
);

$dialog-docked-width: 100%;
$dialog-docked-margin-top: tokens.$space-1400;

$dialog-docked-expanded-min-height: calc(100dvh - #{$dialog-docked-margin-top});

$dialog-docked-scrollable-height: var(--modal-dialog-height, #{$_dialog-scrollable-default-height});
$dialog-docked-scrollable-max-height: $dialog-docked-expanded-min-height;

// ModalHeader
$header-gap: tokens.$space-500;
$header-padding-top: tokens.$space-900;
$header-padding-top-tablet: tokens.$space-1000;
$header-padding-bottom: tokens.$space-700;
$header-title-typography: tokens.$heading-small-bold;

$header-docked-padding-top: tokens.$space-1000;

// ModalBody
$body-padding-y: tokens.$space-700;

// ModalFooter
$footer-gap: tokens.$space-700;
$footer-padding-top: tokens.$space-900;
$footer-padding-bottom: tokens.$space-900;
$footer-padding-top-tablet: tokens.$space-700;
$footer-padding-bottom-tablet: tokens.$space-1000;
$footer-actions-column-gap: tokens.$space-900;
$footer-actions-row-gap: tokens.$space-700;
