#alert-popup, #confirm-popup, #prompt-popup {
    @apply bg-popup-surface;

    h2 {
        @apply text-secondary;
    }

    p {
        @apply text-primary;
    }

    .action-buttons {
        @apply border-box-edge text-primary;

        button:hover {
            @apply bg-info-secondary;
        }

        hr {
            @apply border-box-edge;
        }
    }
}

.is-popup {
    background: rgb(0 0 0 / 40%);

    .elevation-surface {
        @apply bg-box-elevation-background border-box-elevation-edge text-white;
        &.hoverable:hover {
            @apply bg-box-elevation-hover text-white;
        }

        &.success {
            @apply bg-success-primary border-success-secondary text-white;
            &.hoverable:hover {
                @apply bg-success-secondary text-white;
            }
        }
        
        &.error {
            @apply bg-error-primary border-error-secondary text-white;
            &.hoverable:hover {
                @apply bg-error-secondary text-white;
            }
        }
    
        &.info {
            @apply bg-info-primary border-info-secondary text-white;
            &.hoverable:hover {
                @apply bg-info-secondary text-white;
            }
        }
    
        &.warning {
            @apply bg-warning-primary border-warning-secondary text-white;
            &.hoverable:hover {
                @apply bg-warning-secondary text-white;
            }
        }
    }
}