/*************************************************************************
 * Form popup
 ************************************************************************/
.pii-popup .pii-form {
	position: fixed;
	z-index: 10000;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: var(--color-pii-overlay, rgba(0,0,0,0.25));

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	transition: all .2s ease-in-out;
	opacity: 1;
	pointer-events: all;
}

.pii-popup .pii-form-inner {
	display: block;

	max-width: 25em;
	padding: 1em;

	color: var(--color-pii-form-text, black);
	background: var(--color-pii-form-background, white);

	box-shadow: var(--color-pii-form-shadow, 0 0.25rem 0.5rem rgba(0,0,0,0.5));
}

.pii-form input {
	display: inline-block;
}

.pii-popup.hide > .pii-form {
	opacity: 0;
	pointer-events: none;
}

/*************************************************************************
 * Toggle
 ************************************************************************/

/* note: this uses font-size: 0 to hide the link text, always use rems
 * for dimensions in the toggle
 */
.pii-popup > .pii-toggle {
	display: flex;

	position: fixed;
	z-index: 9999;
	bottom: 1rem;
	left: 1rem;

	cursor: pointer;

	flex-direction: column;
	justify-content: center;
	align-items: center;

	font-size: 0;

	width: 3rem;
	height: 3rem;

	border-radius: 1.5rem;

	color: var(--color-pii-toggle-text, white);
	background-color: var(--color-pii-toggle-background, blue);
	box-shadow: var(--color-pii-toggle-shadow, 0 0.25rem 0.5rem rgba(0,0,0,0.5));

	opacity: 0;

	pointer-events: none;
	transition: all .2s ease-in-out;
}

.pii-popup > .pii-toggle::before {
	font-size: initial;
	content: var(--content-pii-toggle, url(images/lock.svg));
}

.pii-popup.hide > .pii-toggle {
	opacity: 1;
	pointer-events: all;
}