/* At a glance icons */

#dashboard_right_now li>span.det-env-type::before {
	content: "\f339";
}

#dashboard_right_now li>span.det-env-type.det-production::before {
	content: "\f319";
}

#dashboard_right_now li>span.det-env-type.det-staging::before {
	content: "\f111";
}

#dashboard_right_now li>span.det-env-type.det-development::before {
	content: "\f107";
}

/* Admin bar background colors */

#wpadminbar ul li#wp-admin-bar-det_env_type .ab-label,
#wpadminbar ul li#wp-admin-bar-det_env_type .ab-item {
	color: inherit;
}

#wpadminbar ul li#wp-admin-bar-det_env_type .ab-sub-wrapper {
	right: 0;
}

#wpadminbar ul li#wp-admin-bar-det_env_type .ab-sub-wrapper .ab-item {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}

#wpadminbar ul li#wp-admin-bar-det_env_type .ab-sub-wrapper .ab-item:hover {
	background-color: fade(#fff, 10%);
}

#wpadminbar ul li#wp-admin-bar-det_env_type {
	/* pointer-events: none; */
	background-color: #0080a8;
	color: #fff;
}

#wpadminbar ul li#wp-admin-bar-det_env_type .ei-value {
	min-width: 1.5rem;
	text-align: right;
}

/* PRODUCTION */
#wpadminbar ul li#wp-admin-bar-det_env_type.det-production {
	background-color: #b92a2a;
}

#dashboard_right_now li>span.det-env-type.det-production, #dashboard_right_now li>span.det-env-type.det-production::before {
	color: #b92a2a;
}

/* STAGING */
#wpadminbar ul li#wp-admin-bar-det_env_type.det-staging {
	background-color: #d79d00;
	color: #000;
}

#wpadminbar ul li#wp-admin-bar-det_env_type.det-staging li {
	color: #fff;
}

#dashboard_right_now li>span.det-env-type.det-staging, #dashboard_right_now li>span.det-env-type.det-staging::before {
	color: #d79d00;
}

/* DEVELOPMENT */
#wpadminbar ul li#wp-admin-bar-det_env_type.det-development {
	background-color: #34863b;
}

#dashboard_right_now li>span.det-env-type.det-development, #dashboard_right_now li>span.det-env-type.det-development::before {
	color: #34863b;
}

/* Admin bar icons */

#wp-admin-bar-det_env_type>div>span.ab-icon::before {
	content: "\f339";
	top: 2px;
	color: inherit;
}

#wp-admin-bar-det_env_type.det-production>div>span.ab-icon::before {
	content: "\f319";
	top: 3px;
}

#wp-admin-bar-det_env_type.det-staging>div>span.ab-icon::before {
	content: "\f111";
	top: 1px;
}

#wp-admin-bar-det_env_type.det-development>div>span.ab-icon::before {
	content: "\f107";
	top: 2px;
}

@media screen and (max-width: 782px) {
	#wpadminbar li#wp-admin-bar-det_env_type {
		display: block;
		position: static;
	}
}