@layer components {
    .modal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-index-overlay);
        padding: var(--pad-md);
    }

    .modal__overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal__content {
        background-color: var(--color-background-app);
        padding: var(--pad-lg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        max-width: 90%;
        width: 400px;
        max-height: 90vh;
        overflow-y: auto;

        /* Ensures the content sits above the backdrop and handles the centering */
        position: relative;
        z-index: var(--z-index-overlay-content);
    }
}