.modal {
    &.is-full-screen {
        > .animation-content,
        > .animation-content > .modal-card {
            width: 100%;
            height: 100%;
            max-height: 100vh;
            margin: 0;
            background-color: $background;
        }
    }
    .animation-content {
        margin: 0 20px;
        .modal-card {
            margin: 0;
        }
        @include mobile {
            width: 100%;
        }
    }
    .modal-content {
        width: 100%;
    }
    .modal-close {
        @include until($modal-breakpoint) {
            /* keep modal-close visible when the contents fill the screen */
            background-color: color-mix(in hsl, $modal-background-background-color 10%, transparent);
            &:hover,
            :focus {
                background-color: color-mix(in hsl, $modal-background-background-color 20%, transparent);
            }
            &:active {
                background-color: color-mix(in hsl, $modal-background-background-color 30%, transparent);
            }
        }
    }
}