woocommerce/packages/js/customer-effort-score/src/style.scss

.woocommerce-customer-effort-score__selection {
	margin: 1em 0;

	.components-base-control__field {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		color: var(--wp-admin-theme-color);

		@include breakpoint( '>600px' ) {
			flex-direction: row;
		}
	}

	.components-radio-control__option {
		&:not(:last-child) {
			// Override package component style.
			margin-bottom: 0;
			margin-right: 4px;
		}

		input {
			// Hide the radio input but keep it accessibile.
			position: absolute;
			opacity: 0;
		}

		label {
			display: block;
			text-align: center;
			box-sizing: border-box;
			width: 9em;
			height: 100%;
			padding: 1em 0.5em;
			font-size: 0.9em;

			&:hover {
				background-color: $studio-wordpress-blue-0;
			}
		}

		input:focus + label {
			outline: 2px solid $studio-wordpress-blue;
			background-color: peach;
			color: $studio-blue-60;
		}

		input:checked + label {
			outline: 2px solid $studio-wordpress-blue;
			background-color: $studio-wordpress-blue-0;
		}

		// Replace the hidden radio input with emoji.
		label::before {
			display: block;
			font-size: 24px;
			text-align: center;
			margin: 1em 0;
			color: $studio-wordpress-blue;
		}

		input[value='1'] + label::before {
			content: '😞';
		}

		input[value='2'] + label::before {
			content: '🙁';
		}

		input[value='3'] + label::before {
			content: '😐';
		}

		input[value='4'] + label::before {
			content: '🙂';
		}

		input[value='5'] + label::before {
			content: '😁';
		}
	}
}

.woocommerce-customer-effort-score__comments {
	label {
		display: block;
		color: inherit;
		font-weight: bold;
	}

	textarea {
		width: 100%;
	}
}

.woocommerce-customer-effort-score__buttons {
	text-align: right;

	.components-button {
		margin-left: 1em;
	}
}