@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';

$highlight-color: #3858e9;

.a4a-feedback__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.a4a-feedback__content {
	margin-block-start: calc( 48px + 8px );
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	border: 1px solid var( --color-neutral-5 );
	border-radius: 8px;
	padding: 16px 24px;

	@include break-large {
		width: 470px;
		max-width: 90%;
	}
}

.a4a-feedback__title {
	@include heading-x-large;
}

.a4a-feedback__description {
	@include body-medium;
	color: var( --color-neutral-60 );
	padding-block: 8px 12px;
	border-bottom: 1px solid var( --color-neutral-0 );
	flex: 1 1 auto;
}

.a4a-feedback__questions {
	padding-block-start: 16px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 auto;

	.form-fieldset {
		margin-block-end: 0;
	}

	.a8c-experience-control .components-base-control__label {
		@include heading-medium;
		margin-block-end: 12px;
		text-transform: uppercase;
		color: var( --color-text );
	}
}

.a4a-feedback__question-details {
	@include heading-large;
	padding-block-end: 8px;
}

.a4a-feedback__experience-selector-label {
	@include heading-medium;
	padding-block-end: 12px;
	text-transform: uppercase;
}

.form-label.a4a-feedback__comments-label {
	@include heading-medium;
	padding-block-end: 12px;
	text-transform: uppercase;
	margin-block-end: 0;
}

.a4a-feedback__comments {
	min-height: 150px;
	border: 1px solid var( --color-neutral-5 );
	box-shadow: 0 1px 2px 0 rgba( 0, 0, 0, 0.05 );
	border-radius: 4px;

	@include break-large {
		width: 100%;
	}
}

.a4a-feedback__cta {
	display: flex;
	gap: 16px;
	flex-direction: row;
	flex-wrap: wrap;

	.a8c-blue-link {
		color: var( --color-primary-50 );
	}

	.components-button {
		flex: 1 1 auto;
	}

	@include break-large {
		width: 100%;

		.components-button {
			flex: unset;
		}
	}
}

.a4a-feedback__suggestions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
