/*
	Client styling that is not a page section of theme.css: the framework libraries (tippy, Ladda)
	restyled with the Layer 1 tokens so they follow the kit and the colour scheme. SweetAlert2 is not
	restyled: the framework's popups run through the shell's pop-ups (client/js/popup.js). Page
	layout goes into the page sections of theme.css (template README, section 6).
*/

/* ---<< Tippy: the kit tooltip (.srvd-tooltip) as the default theme "srvd" >>--------------------- */
.tippy-box[data-theme~="srvd"] {
	background: var(--pos-popover);
	color: var(--pos-text);
	border-radius: 8px;
	font-family: var(--pos-font);
	font-size: 12px;
	line-height: 14px;
	letter-spacing: -0.08px;
	filter: drop-shadow(0 10px 20px var(--pos-shadow));
}

.tippy-box[data-theme~="srvd"] .tippy-content {
	padding: 8px 12px;
}

.tippy-box[data-theme~="srvd"] .tippy-arrow {
	color: var(--pos-popover);
}

/* ---<< Ladda: the spinner of a loading button takes the button's own text colour >>-------------- */
.ladda-button[data-loading] .ladda-spinner > div,
.ladda-button[data-loading] .ladda-spinner > div > div {
	color: currentColor;
}

.srvd-btn.ladda-button {
	overflow: hidden;
}

/* The framework's form feedback (form.js: .is-invalid / .invalid-feedback) on the kit fields lives in theme.css: the
   kit ring in the Bootstrap-interop block, the feedback list in the page section (README section 6) */