div.prompt {
    --promptWidth: 500px;
    --promptZIndexOffset: calc(var(--promptStackIndex, 0) * 3);

    &.wide {
        --promptWidth: 800px;
    }

    &.wider {
        --promptWidth: 1000px;
    }

    &.very-wide {
        --promptWidth: 1400px;
    }

    &.fill {
        --promptWidth: 95%;
    }

    @media screen and (max-width: 500px) {
        --promptWidth: 95% !important;
    }

    &.no-padding {
        div.card {
            padding: 0 !important;
        }
    }

    &.long {
        > div.card {    
            top: 50px;
            bottom: 50px;
            overflow-y: auto;
            overflow-x: hidden;
        }
    }

    display: none;

    &.active {
        display: block;
        width: 0;
    }

    div.backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom :0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: calc(100 + var(--promptZIndexOffset));
    }

    > div.card {
        position: fixed;
        left: calc(50% - (var(--promptWidth) / 2));
        width: var(--promptWidth);
        z-index: calc(101 + var(--promptZIndexOffset));
        text-align: left;

        div.close {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 20px;
            height: 25px;

            svg {
                fill: var(--taurusNetworkDarkBlue);
            }

            &:hover {
                cursor: pointer;
                svg {
                    fill: var(--taurusNetworkPrimary);
                }
            }
        }
    }
    

    &[data-is-dismissable="no"] {
        div.close {
            display: none;
        }
    }
}