@use "../../../bulma/sass/utilities" as bulma-utilities;

$modal-background-color: var(--background) !default;

// Map Local variables
$-css-vars-map: (
    "modal-background-color": $modal-background-color,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("modal", $-css-vars-map);

.modal {
    &.is-full-screen {
        > .animation-content,
        > .animation-content > .modal-card {
            width: 100%;
            height: 100%;
            max-height: 100vh;
            margin: 0;
            background-color: var(--modal-background-color);
        }
    }

    .animation-content {
        margin: 0 20px;

        .modal-card {
            margin: 0;
        }

        @include bulma-utilities.mobile {
            width: 100%;
        }
    }

    .modal-content {
        width: 100%;
    }
}