// 1. Use ScrollView's backdoor to fix its height inside ModalDialog in Safari.
// 2. We need to set the box-sizing again because the parent element unsets styles using `all: unset`.
// 3. Intentionally transition also the worse performing properties to smooth out the changes of viewport size around
//    the tablet breakpoint. However, `top` and `bottom` are not transitioned when switching from and to `auto`.
// 4. Override bottom padding of parent `.Modal` in the docked variant.

@use 'sass:map';
@use '../../tools/breakpoint';
@use '../../tools/typography';
@use 'theme';

.ModalDialog {
    @include typography.generate(theme.$typography);

    --scroll-view-vertical-height: auto; // 1.

    display: flex;
    flex-direction: column;
    box-sizing: border-box; // 2.
    width: theme.$dialog-width;
    max-width: calc(100% - #{theme.$padding-x});
    height: theme.$dialog-height;
    max-height: theme.$dialog-max-height;
    margin-inline: auto;
    margin-top: var(--modal-top);
    margin-bottom: var(--modal-bottom);
    overflow-x: var(--modal-body-overflow-x, visible);
    overflow-y: var(--modal-body-overflow-y, visible);
    color: theme.$dialog-text-color;
    border-radius: theme.$dialog-border-radius;
    background-color: theme.$dialog-background-color;
    box-shadow: theme.$dialog-shadow;
    transform: translateY(var(--modal-translate-y)) scale(var(--modal-scale));
    transform-origin: var(--modal-transform-origin);
    overscroll-behavior: contain;

    @include breakpoint.up(map.get(theme.$breakpoints, desktop)) {
        width: theme.$dialog-width-desktop;
    }

    @media (prefers-reduced-motion: no-preference) {
        transition-property: width, height, max-height, border-radius, transform; // 3.
        transition-duration: inherit;
    }
}

.ModalDialog--scrollable {
    --modal-body-overflow-x: hidden;
    --modal-body-overflow-y: auto;

    height: theme.$dialog-scrollable-height;
    max-height: theme.$dialog-scrollable-max-height;

    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
        height: theme.$dialog-scrollable-height-tablet;
        max-height: theme.$dialog-scrollable-max-height-tablet;
    }

    @include breakpoint.up(map.get(theme.$breakpoints, desktop)) {
        height: theme.$dialog-scrollable-height-desktop;
        max-height: theme.$dialog-scrollable-max-height-desktop;
    }
}

.ModalDialog--dockOnMobile {
    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
        --modal-top: auto;
        --modal-bottom: #{-1 * theme.$padding-y}; // 4.
        --modal-translate-y: #{theme.$transition-shift-distance};
        --modal-transform-origin: bottom center;

        width: theme.$dialog-docked-width;
        max-width: none;
        border-radius: theme.$dialog-border-radius theme.$dialog-border-radius 0 0;
    }
}

.ModalDialog--dockOnMobile.ModalDialog--scrollable {
    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
        height: theme.$dialog-docked-scrollable-height;
        max-height: theme.$dialog-docked-scrollable-max-height;
    }
}

[open] > .ModalDialog--dockOnMobile {
    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
        --modal-translate-y: 0;
    }
}

.ModalDialog--dockOnMobile.ModalDialog--expandOnMobile {
    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
        min-height: theme.$dialog-docked-expanded-min-height;
    }
}
