body.modal-open {
	overflow: hidden;
}

.badge {
	background: #333;
	padding: 0.1em 0.25em;
	border-radius: 3px;
	margin: 0.1em 0.25em 0.1em 0;
	background: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue));
	color: var(--wp--preset--color--white);
	white-space:pre;
}

.method-state {
	font-size: 0.75em;
}

#method-info {
	position: fixed;
	left:  0;
	top:   0;
	right: 0;
	bottom:0;
	z-index: 9999999;
}

.method-backdrop {
	position: fixed;
	left:  0;
	top:   0;
	right: 0;
	bottom:0;
	z-index: 9999998;
	cursor: pointer;
	background-color:rgba(0,0,0,0.75);
}

.method-modal {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width:75vw;
	background-color: white;
	z-index: 99999999;
	border-radius: 3px;
	max-height: 90vh;
	transition: 0.25s;
}

.method-heading, .method-body {
	padding: 0.5em;
}

.method-heading {
	border-bottom: 1px solid #777;
}

.method-heading h3 {
	margin: 0;
	font-size: 1.5em;
}

.method-body iframe {
	min-height:50vh;
	width:100%;
	overflow-y:scroll;
	border:1px solid #777;
	border-radius: 3px;
}

.method-modal-close {
	float: right;
	cursor: pointer;
}

.show-other-states {
	cursor: pointer;
	background-color: var(--wp--preset--color--quaternary,  var(--wp--preset--color--accent-4));
}

.show-other-states ~ .method-state {
	display: none;
}