/**
 * rules for the 'prod' environment
 *
 * The backgroud-color for this is same as the border-left-color of #message.notice-error.
 */
#wpadminbar .ab-top-menu .shc-show-env.prod .ab-item,
#wpadminbar .ab-top-menu .shc-show-env.prod:hover .ab-item
{
	background-color: #dc3232 ;
}

/**
 * our prod background-color is REAL close the admin bar background-color in the sunrise
 * Admin Color Scheme, so put a black border around it to help it stand out
 */
.admin-color-sunrise #wpadminbar .ab-top-menu .shc-show-env.prod .ab-item
{
	border: 2px solid black ;
	box-sizing: border-box ;
}

/**
 * rules for the 'staging' environment
 *
 * The backgroud-color for this is same as the border-left-color of #message.notice-warning.
 */
#wpadminbar .ab-top-menu .shc-show-env.staging .ab-item,
#wpadminbar .ab-top-menu .shc-show-env.staging:hover .ab-item
{
	background-color: #ffba00 ;
}

/**
 * rules for the 'dev' environment
 *
 * The backgroud-color for this is same as the border-left-color of #message.notice-success.
 */
#wpadminbar .ab-top-menu .shc-show-env.dev .ab-item,
#wpadminbar .ab-top-menu .shc-show-env.dev:hover .ab-item
{
	background-color: #46b450 ;
}

/**
 * general purpose rules
 */
#wpadminbar:not(.mobile) .ab-top-menu .shc-show-env:hover .ab-item
{
	/* limit change of color on :hover */
	color: inherit ;
}

/**
 * rules for smaller screens
 */
@media screen and (max-width: 782px)
{
	/* make sure our admin bar node shows on small screens */
	#wpadminbar li#wp-admin-bar-shc-show-env
	{
		display: block ;
	}

	/* add some padding, equivlent to what is used by default for nodes in larger screens */
	#wpadminbar li#wp-admin-bar-shc-show-env .ab-item
	{
		padding-left: 10px ;
		padding-right: 10px ;
	}
}