/**
 * The two vendor dialogs, in the tenant's own colour.
 *
 * SweetAlert2 (every confirm and "saved" popup on the dashboard) injects its
 * CSS as a <style> at runtime, and the Uncanny course timer's idle popup
 * prints an unlayered sheet. A layered rule loses to both whatever its
 * selector, so this file is exempt from the cascade block and wins on
 * specificity instead: each rule carries one class more than the vendor rule
 * it answers.
 *
 * A confirm button given its own colour in JS (the red delete buttons pass
 * confirmButtonColor) keeps it, because that lands as an inline style.
 */

.swal2-popup {
	& .swal2-styled.swal2-confirm {
		background-color: var(--avia-color-accent);
		color: var(--avia-color-accent-contrast);

		&:focus {
			box-shadow: 0 0 0 3px rgba(var(--avia-color-accent-rgb), 0.4);
		}
	}

	& .swal2-icon.swal2-question {
		border-color: rgba(var(--avia-color-accent-rgb), 0.4);
		color: var(--avia-color-accent);
	}

	& .swal2-icon.swal2-success {
		border-color: var(--avia-color-accent);
		color: var(--avia-color-accent);

		& [class^='swal2-success-line'] {
			background-color: var(--avia-color-accent);
		}

		& .swal2-success-ring {
			border-color: rgba(var(--avia-color-accent-rgb), 0.3);
		}
	}
}

/* Uncanny Toolkit Pro's "are you still working" popup. The box is sized from
   the message's unwrapped width when it opens, so the message is allowed to
   wrap inside that width and is centred over the two centred buttons. */
.ultp-course-timer-modal {
	& .dialog-box-content {
		white-space: normal;
		text-align: center;
	}

	& .dialog-btn .dialog-btn-confirm {
		background: var(--avia-color-accent);
		color: var(--avia-color-accent-contrast);

		&:hover {
			background: color-mix(in srgb, var(--avia-color-accent) 88%, #000);
		}
	}
}