@import 'components/customer-feedback-simple/customer-feedback-simple.scss';
@import 'components/feedback-modal/feedback-modal.scss';

.woocommerce-customer-effort-score__selection {
	margin: 1em 0 1.5em 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;
			justify-content: center;
		}

		.components-h-stack {
			@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 {
	margin-bottom: 1.5em;

	label {
		display: block;
		color: inherit;
		font-weight: bold;
		text-transform: none;
		font-size: 14px;
	}

	textarea {
		width: 100%;
	}
}

.components-modal__content {
	padding-bottom: 100px;
}

.woocommerce-customer-effort-score__buttons {
	text-align: right;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: calc( 2 * $gap );

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

.woocommerce-customer-effort-score .woocommerce-customer-effort-score__intro {
	max-width: 550px;
	margin: 0 0 1.5em 0;
}