/* Preserve your existing colors, backgrounds, borders and hover rules. */

.mud-button-root.app-logout-button,
.mud-button-root.app-logout-cancel,
.mud-button-root.app-logout-confirm {
    text-transform: none;
    letter-spacing: normal;
    font: inherit;
}

.mud-button-root.app-logout-button {
    width: 100%;
    justify-content: flex-start;
}

.app-logout-button .mud-button-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 0.75rem;
}

.app-logout-button .app-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-logout-button .app-nav-text {
    font: inherit;
    color: inherit;
}

/*
 * Your original app-logout-dialog rule should provide the panel padding.
 * Remove MudBlazor's additional section padding to avoid doubling it.
 */
.mud-dialog.app-logout-dialog .mud-dialog-title,
.mud-dialog.app-logout-dialog .mud-dialog-content,
.mud-dialog.app-logout-dialog .mud-dialog-actions {
    padding: 0;
}

/* Loading content. */
.app-logout-loading {
    padding: 1rem;
    text-align: center;
}

    .app-logout-loading .app-logout-spinner {
        color: var(--nav-accent, var(--mud-palette-primary));
    }

    .app-logout-loading .app-logout-loading-title {
        margin-top: 1.25rem;
        font-size: 1.125rem;
        font-weight: 700;
    }

    .app-logout-loading .app-logout-loading-message {
        margin-top: 0.5rem;
        color: var(--mud-palette-text-secondary);
    }

/* Visible keyboard focus. */
.mud-button-root.app-logout-button:focus-visible,
.mud-button-root.app-logout-cancel:focus-visible,
.mud-button-root.app-logout-confirm:focus-visible {
    outline: 2px solid var(--nav-accent, currentColor);
    outline-offset: 3px;
}