body:has(.modal) {
    overflow: hidden;
}

.modal {
    position: fixed;
    z-index: var(--elevation--modal);
    top: 0;
    left: 0;

    overflow: auto;

    width: 100%;
    height: 100%;

    iframe {
        display: block;

        margin: 0;
        padding: 0;

        background-color: rgb(var(--background--neutral-base-default--light));
        border: 0;
    }

    .std-table {
        margin: 0;
    }

    /* The #modal-in wrapper below is there only because of the old css.
     * Also the #modal-controller-name and #h1-modal ids.
     * It should be removed after the admin redesign. */
    #modal-in {
        padding: 0;
    }

    #modal-controller-name {
        top: 20px;
        left: 40px;
        padding-left: 0;
    }

    #h1-modal {
        margin-bottom: 8px;
        padding-right: var(--padding--xl);
    }
}

.modal__overlay {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: var(--blend--full--light);
    background-color: rgb(var(--background--neutral-full-default--light) / var(--blend--medium--light));

    transition: opacity 0.3s ease;

    &.modal__overlay--open {
        animation: fadeIn 0.3s ease forwards;
    }

    &.modal__overlay--closing {
        animation: fadeOut 0.3s ease forwards;
    }
}

.modal__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 100dvh;
    padding: 30px 14px;
}

.modal__inner {
    position: relative;

    flex-basis: auto;
    align-self: stretch;

    min-width: min(100%, 560px);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;

    opacity: var(--blend--full--light);

    transition: opacity 0.3s ease;

    &.modal__inner--open {
        animation: fadeIn 0.3s ease forwards;
    }

    &.modal__inner--closing {
        animation: fadeOut 0.3s ease forwards;
    }
}

.modal__inner--maxWidth {
    max-width: calc(600px + 2 * var(--borderWidth--md));
}
.modal__inner--maxWidthHug {
    max-width: max-content;
}

.modal__inner--maxWidthFull {
    max-width: unset;
    margin-right: unset;
    margin-left: unset;
}


.modal__body {
    width: 100%;
    height: 100%;

    background: rgb(var(--background--neutral-base-default--light));
    border: var(--borderWidth--md) solid #14b1ef66;
    border-radius: var(--borderRadius--xl);

    &.modalSmarty {
        padding: var(--padding--xl);
    }

    & p {
        margin: 1em 0;

        &:first-child { margin-top: 0 }
        &:last-child { margin-bottom: 0 }
    }
}

.modal__header {
    display: flex;
    padding: var(--padding--xl);

    .typography__headline1 {
        min-height: 32px;
        margin-bottom: 0;
        padding-right: var(--padding--4xl);

        &:nth-child(n + 2) {
            margin-top: 0;
        }
    }
}

.modal__titleWrapper {
    display: flex;
    flex-direction: column;
}

.modal__subheader {
    margin-top: var(--margin--xs);
    font-size: var(--fontSize--body-medium);
    line-height: var(--lineHeight--body-medium);
}

.modal__icon {
    width: 40px;
    height: 40px;
    margin-right: var(--margin--xl);
    padding: var(--padding--sm);

    color: rgb(var(--foreground--neutral-full-default--dark));

    background-color: rgb(var(--background--neutral-high-default--light));
    border-radius: 50%;

    &--level-notice { background-color: rgb(var(--background--notice-medium-default--light)); }
    &--level-alert { background-color: rgb(var(--background--warning-medium-default--light)); }
    &--level-error { background-color: rgb(var(--background--critical-high-default--light)); }
    &--level-success { background-color: rgb(var(--background--success-high-default--light)); }
}

.modal__close {
    cursor: pointer;

    position: absolute;
    z-index: 2;
    top: 34px;
    right: 34px;

    &:empty {
        cursor: pointer;

        top: 30px;
        right: 30px;

        width: 30px;
        height: 30px;
        &.shp-cross::before {
            color: rgb(var(--foreground--neutral-medium-default--light));
        }
        &:hover {
            &.shp-cross::before {
                color: rgb(var(--foreground--neutral-full-hovered--light));
            }
        }
    }
}

.modal__content {
    padding: 0 var(--padding--xl) var(--padding--xl);
}

.modal__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap--md);
    justify-content: flex-end;

    padding: 0 var(--padding--xl) var(--padding--xl);
}

.modal__iframeContainer {
    position: relative;
    overflow: auto;
}

@keyframes fadeIn {
    from {
        opacity: var(--blend--full--light);
    }

    to {
        opacity: var(--blend--solid--light);
    }
}

@keyframes fadeOut {
    from {
        opacity: var(--blend--solid--light);
    }

    to {
        opacity: var(--blend--full--light);
    }
}

#h1-modal {
    margin-bottom: 8px;
    padding-right: var(--padding--xl);
}