// Media Query.
@mixin mobile {
	@media ( max-width: 782px ) {
		@content;
	}
}

// Width >= 782px.
#wpadminbar {
	.ab-top-menu {
		// Parent.
		#wp-admin-bar-show-current-width {
			> .ab-item {
				// ◀▶ Icon.
				.ab-icon {
					&:before {
					    content: "\f229";
					    top: 2px;
					}
					// ◀▶ Screen width.
					.width {
						display: none;
					}
				}
				// ◀▶ Icon width.
				.ab-label {
					// '0px'
					// .width-wrap {}
					// 'Breakpoint'
					.breakpoint-wrap {
						margin-left: .25rem;
						// .breakpoint {}
					}
				}
			}
		}
		// Child.
		#wp-admin-bar-show-current-width-breakpoint {
			> .ab-item {
				.label {
					line-height: inherit;
					display: inline-block;
					margin-right: .25rem;
					font-weight: bold;
				}
				.breakpoint-wrap {
					line-height: inherit;
					display: inline-block;
					margin-left: .25rem;
					font-weight: bold;
					.breakpoint {
						line-height: inherit;
						display: inline-block;
					}
				}
			}
		}
		[id ^= "wp-admin-bar-show-current-width-breakpoint-"] {
			.icon {
				line-height: inherit;
				display: inline-block;
				width: 1rem;
			}
			.name {
				line-height: inherit;
				display: inline-block;
				width: 9rem;
			}
			.range {
				line-height: inherit;
				display: inline-block;
				width: 9rem;
			}
		}
	}
}

@include mobile {
	#wpadminbar {
		.ab-top-menu {
			// Parent
			#wp-admin-bar-show-current-width {
				position: static;
				display: block;
				> .ab-item {
					// ◀▶ Icon.
					.ab-icon {
						position: relative;
						display: block;
						&:before {
							font-size: 32px;
							position: absolute;
							top: 0;
							left: 10px;
						}
						// ◀▶ Screen width.
						.width {
							display: inline-block;
							width: 100%;
							line-height: 1;
							font-size: 13px;
							text-align: center;
						}
					}
					// ◀▶ Icon width
					.ab-label {
						// '0px'
						.width-wrap {
							display: none;
							// .width {}
						}
						// 'Breakpoint'
						.breakpoint-wrap {
							display: none;
							// .breakpoint {}
						}
					}
				}
			}
			// Child
			// #wp-admin-bar-show-current-width-breakpoint {
			//     > .ab-item {
			//         .label {}
			//             .breakpoint-wrap {
			//             .breakpoint {}
			//         }
			//     }
			// }
			// [id ^= "wp-admin-bar-show-current-width-breakpoint-"] {
			// }
		}
	}
}