@use 'mixins';
@use 'constants' as consts;

#modal-dialog {
    position: fixed;
    z-index: 1;
    left: 50%;
    width: 50%;
    transform: translate(-50%, 0%);

    @include mixins.popup;

    // The inner div will cover the entire dialog and prevent user to
    // click on it to close the dialog. Thus, The use can click outside
    // the div and it will be considered as a click on the dialog.
    padding: 0;

    >div {
        padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
    }
}