ion-modal {
    --core-header-buttons-background: var(--core-header-toolbar-background);

    &.show-modal {
        @media only screen and (min-width: 768px) and (min-height: 600px) {
            --border-radius: var(--modal-radius);
        }
    }

    &.ion-datetime-button-overlay {
        --border-radius: var(--modal-radius);
    }

    &.core-modal-lateral,
    &.core-modal-fullscreen {
        --border-radius: 0px;
    }

    &.core-modal-no-background {
        --background: transparent;
        --box-shadow: none !important;
        pointer-events: none;

        &::part(backdrop) {
            display: none;
        }

        &::part(content) {
            pointer-events: none;
        }
    }

    &.modal-sheet::part(handle) {
        background: var(--core-header-buttons-color);
    }

    &.core-modal-fullscreen::part(content) {
        position: absolute;
        @include position(0 !important, null, null, 0 !important);
        display: block;
        width: 100% !important;
        height: 100% !important;
    }

    &.core-modal-transparent,
    &.core-modal-transparent-no-filter {

        &::part(backdrop) {
            backdrop-filter: none;
        }

        &::part(content) {
            backdrop-filter: none;
            --background: rgb(10 10 10 / 20%);

            ion-content {
                --background: transparent !important;
            }
            position: absolute;
            @include position(0 !important, null, null, 0 !important);
            display: block;
            width: 100% !important;
            height: 100% !important;
        }
    }

    &.core-modal-transparent {
        &::part(backdrop) {
            backdrop-filter: blur(8px);
        }
        &::part(content) {
            backdrop-filter: blur(12px);
        }
    }

    &.core-modal-lateral {
        --ion-safe-area-left: 0px;
        --ion-safe-area-right: 0px;

        --height: 100% !important;
        --width: calc(100% - var(--modal-lateral-margin));
        --box-shadow: 0 28px 48px rgb(0 0 0 / 40%);

        // These lines is intended to hide modal-shadow div only in iOS because it cannot be positioned correctly.
        // Both are set on content part.
        --max-height: 0px;
        --max-width: 0px;

        &::part(content) {
            @include margin-horizontal(var(--modal-lateral-margin), null);

            --max-width: calc(var(--modal-lateral-max-width));
            --max-height: 100%;

            position: absolute;
            @include position(0 !important, 0 !important, 0 !important, unset !important);
            display: block;
        }
    }

    @each $breakpoint, $width in $screen-breakpoints {
        &.core-modal-lateral-#{$breakpoint} {
            --modal-lateral-max-width: #{$width};
        }
    }

    &.core-password-modal {
        --border-radius: var(--mdl-shape-borderRadius-sm);
        --min-width: auto;
        --min-height: 300px;
        --width: 384px;
        --height: auto;

        .ion-page {
            position: absolute;
        }

        form {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-between;
        }
    }

    &.core-modal-auto-height {
        --height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .content-auto-height {
            max-height: 80vh;
            overflow: auto;
        }
    }
}