amis/scss/components/_modal.scss

.is-modalOpened {
    overflow: hidden;

    .#{$ns}Modal {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translate3d(0, -300px, 0) scale(0.2);
    }
}

@keyframes modalOut {
    to {
        opacity: 0;
        transform: translate3d(0, -300px, 0) scale(0.2);
    }
}

.#{$ns}Modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-modal;
    overflow: hidden;
    outline: 0;

    &-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
        min-height: $Modal-content-minHeight;
        pointer-events: auto;
        background-color: $Modal-bg;
        background-clip: padding-box;
        outline: 0;
        z-index: 2;
        margin-left: auto;
        margin-right: auto;
        margin-top: $Modal-content-startMarginTop;
        margin-bottom: $gap-md;
        border: $Modal-content-borderWidth solid $Modal-content-borderColor;
        border-radius: $Modal-content-borderRadius;

        // transition: ease-out all 0.3s;
        // transform: translateY(-300px) scale(0.2);
        // opacity: 0;

        &.in,
        &.out {
            // opacity: 1;
            // transform: translateY(0) scale(1);
            animation-duration: 0.35s;
            animation-fill-mode: both;
        }

        &.in {
            animation-name: modalIn;
        }

        &.out {
            animation-name: modalOut;
        }
    }

    &-overlay {
        transition: ease-in-out opacity 0.5s;
        // transition-delay: 0.2s;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: $Modal-overlay-bg;
        opacity: 0;

        &.in {
            opacity: 1;
        }

        &.out {
            opacity: 0;
        }
    }

    &-header {
        padding: $Modal-header-paddingY $Modal-header-paddingX;
        background-color: $Modal-header-bg;
        @include clearfix();
        border-bottom: $Modal-body-borderTop;

        @if $Modal-content-borderRadius {
            border-top-left-radius: $Modal-content-borderRadius;
            border-top-right-radius: $Modal-content-borderRadius;
        }
    }

    &-title {
        font-size: $Modal-title-fontSize;
        color: $Modal-title-color;
    }

    &-close {
        float: right;
        color: $Modal-close-color;
        line-height: inherit;
        text-decoration: none;
        vertical-align: middle;

        svg {
            width: $Modal-close-width;
            height: $Modal-close-width;
            fill: $Modal-close-color;
        }

        &:not(.is-disabled) {
            cursor: pointer;

            &:hover {
                text-decoration: none;
                color: $Model-close-onHover-color;

                svg {
                    fill: $Model-close-onHover-color;
                }
            }
        }
    }

    &-content>&-close {
        position: absolute;
        right: $gap-md;
        top: $gap-sm;
        z-index: 10;
    }

    &-body {
        padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY;
        flex-basis: 0;
        flex-grow: 1;
    }

    &-header+&-body {
        padding-top: $Modal-body-paddingY;
    }

    &-footer {
        // @include clearfix();
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: $Modal-footer-padding;
        border-top: $Modal-body-borderBottom;
        margin: $Modal-footer-marginY $Modal-footer-marginX;

        @if $Modal-content-borderRadius {
            border-bottom-left-radius: $Modal-content-borderRadius;
            border-bottom-right-radius: $Modal-content-borderRadius;
        }

        .#{$ns}Button {
            margin-left: $gap-sm;
        }
    }
}

@for $i from (2) through 10 {
    .#{$ns}Modal--#{$i}th {
        .#{$ns}Modal-content {
            margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop;
        }
    }
}

@include media-breakpoint-up(sm) {
    .#{$ns}Modal-content {
        max-width: $Modal-widthBase;
    }

    .#{$ns}Modal--sm .#{$ns}Modal-content {
        max-width: $Modal-widthSm;
    }

    .#{$ns}Modal--base .#{$ns}Modal-content {
        max-width: $Modal-widthBase;
    }

    .#{$ns}Modal--md .#{$ns}Modal-content {
        max-width: $Modal-widthMd;
    }

    .#{$ns}Modal--lg .#{$ns}Modal-content {
        max-width: $Modal-widthLg;
    }

    .#{$ns}Modal--xl .#{$ns}Modal-content {
        max-width: $Modal-widthXl;
    }
}

.#{$ns}Dialog-info {
    flex-basis: 0;
    flex-grow: 1;
    text-align: left;
}

.#{$ns}Dialog-error {
    color: $danger;
}