/* Additional styling to thickbox that displays modal */
/* stylelint-disable selector-max-id */

@keyframes jetpack-memberships_button__spinner-animation {

	100% {
		transform: rotate(360deg);
	}
}

.jetpack-memberships-spinner {
	display: none;
	width: 1em;
	height: 1em;
	margin: 0 0 0 5px;

	svg {

		/* Better center-align the spinner with button text, because
		 * 1m height doesn't take line-height into account */
		margin-bottom: -2px;
		width: 100%;
		height: 100%;
	}
}

.jetpack-memberships-spinner-rotating {
	transform-origin: center;
	animation: jetpack-memberships_button__spinner-animation 0.75s infinite linear;
}

.is-loading .jetpack-memberships-spinner {
	display: inline-block;
}

body.jetpack-memberships-modal-open {
	overflow: hidden;
}

dialog.jetpack-memberships-modal {
	opacity: 1;

	&,
	iframe {
		position: fixed;
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: none;
		border: 0;
		background: transparent;
	}

	&::backdrop {
		background-color: #000;
		opacity: 0.7;
		transition: opacity 0.2s ease-out;
	}

	&.is-loading {

		&,
		&::backdrop {
			opacity: 0;
		}
	}

}
