$z-index: 999;

.environment-badge {
	padding: 0;
	position: fixed;
	bottom: 27px;
	right: 86px;
	z-index: $z-index;

	// The hovered class is toggled in load-dev-helpers/index.js
	&.hovered .environment:not(:empty) {
		display: inline-block;

		// hide everything inside each tab
		& > * {
			display: none;
		}

		// only show the tab's title (first child)
		& > *:first-child {
			display: block;
		}
	}

	.bug-report {
		position: relative;
		display: inline-flex;
		background-color: #fff;
		border: solid 1px #3c434a;
		border-radius: 50%;
		color: #3c434a;
		margin-left: -4px;
		text-decoration: none;
		text-align: center;
		z-index: $z-index + 1;
		transition: border-radius 0.2s ease-out;
		vertical-align: middle;
	}

	.environment {
		position: relative;
		display: none;
		font-size: 9px;
		font-weight: 600;
		line-height: 1;
		text-transform: uppercase;
		padding: 4px 7px 4px 6px;
		vertical-align: middle;
		transition: all 0.2s ease-out;
		background-color: #fff;
		box-shadow: 0 0 0 1px #3c434a;

		&.is-env {
			display: inline-block;
		}
		a {
			text-decoration: none;
			display: inline-block;
			color: #3c434a;

			&:hover {
				transform: scale(1.1);
			}
		}

		&.is-staging {
			color: #361f00;
			background-color: #faa754;
		}
		&.is-wpcalypso {
			color: #003024;
			background-color: #31cc9f;
		}
		&.is-dev {
			color: #35163b;
			background-color: #d48fc8;
		}
		&.is-horizon,
		&.is-feedback {
			color: #14215a;
			background-color: #adbaf3;
		}
		&.is-jetpack-cloud-dev,
		&.is-jetpack-cloud-staging {
			color: #003010;
			background-color: #64ca43;
		}

		&.branch-name {
			text-transform: inherit;
			background-color: #3c434a;
			color: #fff;
		}
	}

	.notouch & {
		.bug-report {
			&:hover {
				border-radius: 2px;
			}
		}
	}
}

@include breakpoint-deprecated( "<960px" ) {
	.environment-badge {
		right: 20px;

		&.hovered {
			display: flex;
			flex-wrap: wrap-reverse;
			justify-content: flex-end;
			padding-left: 20px;
		}
	}
	.bug-report {
		margin-top: -10px;
	}
}
