.stax-responsive-control-bar {
	display: flex;
	align-items: center;
	margin-left: 14px;

	.customize-control-title {
		margin: 0;
	}

	.components-button-group {
		display: flex;
		border: none;
	}

	button {
		height: auto;
		box-shadow: none !important;
		padding: 3px 4px !important;
		min-width: unset !important;

		svg,
		.dashicon {
			color: lighten($accent-color, 20);
			height: 15px;
			width: 16px;
			font-size: 15px;
		}
	}
}

$devicemap: "tablet", "mobile", "desktop";

@each $device in $devicemap {
	.preview-#{$device} {
		.stax-responsive-control-bar {
			button.#{$device} {
				.dashicon {
					color: darken($accent-color, 50);
				}
			}
		}
	}
}
