@layer components {
    .modal-dialog {
            background: var(--dashboard-color-surface);
            border: 1px solid var(--dashboard-color-border);
            border-radius: 0;
            border-width: 0;
            margin: auto;
            max-height: calc(100vh - 2rem);
            max-width: 34rem;
            overflow: visible;
            padding: 0;
            width: calc(100% - 2rem);
        }

    .modal-dialog::backdrop {
            background: rgb(15 23 42 / 0.3);
        }

    .modal-dialog > form {
            border: 1px solid var(--dashboard-color-border);
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 2rem);
            min-height: 0;
        }

    .modal-dialog--form {
            max-width: 34rem;
        }
}