/**
 * Admin Bar Server Info - Admin Bar Styles
 *
 * @package Admin_Bar_Server_Info
 * @since 1.2.0
 */

/* Main admin bar item styles */
#wpadminbar li#wp-admin-bar-abs_server_info,
#wpadminbar li#wp-admin-bar-abs_server_info > .ab-item {
	background-color: #1d2327 !important;
	color: #f0f0f1 !important;
	line-height: 32px !important;
}

#wpadminbar li#wp-admin-bar-abs_server_info:hover,
#wpadminbar li#wp-admin-bar-abs_server_info:hover > .ab-item {
	background-color: #1d2327 !important;
	color: #f0f0f1 !important;
}

/* Hide text but show icon */
#wpadminbar li#wp-admin-bar-abs_server_info > .ab-item {
	font-size: 0 !important;
	line-height: 32px !important;
}

/* Show dashicons icon - override font-size: 0 */
#wpadminbar li#wp-admin-bar-abs_server_info .dashicons {
	color: #f0f0f1 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 20px !important;
	font-family: dashicons !important;
	width: 20px !important;
	height: 20px !important;
	line-height: 32px !important;
	display: inline-block !important;
	visibility: visible !important;
	position: relative !important;
	z-index: 999 !important;
}

#wpadminbar li#wp-admin-bar-abs_server_info .dashicons:before {
	color: #f0f0f1 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 20px !important;
	font-family: dashicons !important;
	width: 20px !important;
	height: 20px !important;
	line-height: 32px !important;
	display: inline-block !important;
	visibility: visible !important;
}

/* Dropdown menu styles (always available) */
#wpadminbar li#wp-admin-bar-abs_server_info .ab-sub-wrapper {
	background-color: #1d2327 !important;
	border: 1px solid #2c3338 !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	min-width: 280px !important;
	padding: 8px 0 !important;
}

/* Submenu items */
#wpadminbar li#wp-admin-bar-abs_server_info .ab-sub-wrapper .ab-item {
	display: block !important;
	padding: 4px 16px !important;
	line-height: 1.3 !important;
	font-size: 12px !important;
	color: #f0f0f1 !important;
	border-bottom: 1px solid #2c3338 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

#wpadminbar li#wp-admin-bar-abs_server_info .ab-sub-wrapper .ab-item:last-child {
	border-bottom: none !important;
}

#wpadminbar li#wp-admin-bar-abs_server_info .ab-sub-wrapper .ab-item:hover {
	background-color: #2c3338 !important;
	color: #fff !important;
}

/* Ensure submenu items are displayed vertically */
#wpadminbar li#wp-admin-bar-abs_server_info .ab-sub-wrapper ul {
	display: block !important;
}

#wpadminbar li#wp-admin-bar-abs_server_info .ab-sub-wrapper li {
	display: block !important;
	width: 100% !important;
}

/* Mobile styles - consolidated for both media query and .mobile class */
@media screen and (max-width: 782px) {
	#wp-toolbar > ul > li#wp-admin-bar-abs_server_info,
	#wpadminbar.mobile li#wp-admin-bar-abs_server_info {
		display: list-item !important;
		visibility: visible !important;
	}

	#wpadminbar li#wp-admin-bar-abs_server_info > .ab-item,
	#wpadminbar.mobile li#wp-admin-bar-abs_server_info > .ab-item {
		font-size: 0 !important;
		line-height: 46px !important;
		padding: 0 10px !important;
	}

	/* Icon styles for mobile */
	#wpadminbar li#wp-admin-bar-abs_server_info .dashicons,
	#wpadminbar.mobile li#wp-admin-bar-abs_server_info .dashicons {
		font: 40px / 1 dashicons !important;
		margin: 0;
		padding: 0;
		width: 52px;
		height: 46px;
		text-align: center;
	}

	#wpadminbar li#wp-admin-bar-abs_server_info .dashicons:before,
	#wpadminbar.mobile li#wp-admin-bar-abs_server_info .dashicons:before {
		top: 0;
		line-height: 1.26;
		height: 46px !important;
		text-align: center;
		width: 52px;
		display: block;
	}

	/* Dropdown full width on mobile */
	#wpadminbar li#wp-admin-bar-abs_server_info .ab-sub-wrapper,
	#wpadminbar.mobile li#wp-admin-bar-abs_server_info .ab-sub-wrapper {
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		position: fixed !important;
		top: 46px !important;
		transform: translateX(0) !important;
	}
}