// October 2022: Temporary mixin, to be removed once button styles in Elements have been refactored. Unable to use existing button styles in Elements because there is not one type of button that is satisfactory across all imprints for this component.

@mixin customer-satisfaction-input-button {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	border-radius: 32px;
	border: 4px solid white;
	box-shadow: 0 0 0 1px #01324b;
	color: #01324b;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	margin: 8px 0 0 0;
	padding: 8px 16px;
	text-decoration: none;
	transition: all 0.2s;
	width: 100%;

	&:hover {
		color: white;
		background-color: #01324b;
		border: 4px solid #01324b;
		box-shadow: none;
	}

	&:focus {
		border: 4px solid #ffcc00;
		box-shadow: none;
		outline: none;
	}
}

.c-customer-satisfaction-input {
	padding: $customer-satisfaction-input-container-padding;
	background-color: $customer-satisfaction-input-container-background-color;
	overflow: hidden;
	font-family: $customer-satisfaction-input-font-family;
}

.c-customer-satisfaction-input__container {
	display: flex;
	justify-content: center;
}

// !important used to ensure overrides heading styles on all of our imprint sites
.c-customer-satisfaction-input__heading {
	margin: 0 0 $customer-satisfaction-input-heading-margin !important;
	font-family: inherit !important;
	font-size: $customer-satisfaction-input-heading-font-size !important;
	line-height: $customer-satisfaction-input-line-height !important;
	font-weight: $customer-satisfaction-input-heading-font-weight !important;
}

.c-customer-satisfaction-input__submit-message div {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.c-customer-satisfaction-input__submit-message svg {
	width: $customer-satisfaction-input-message-icon-size;
	height: $customer-satisfaction-input-message-icon-size;
	margin-right: $customer-satisfaction-input-message-icon-margin;
}

.c-customer-satisfaction-input__submit-message p {
	margin: 0;
	line-height: $customer-satisfaction-input-line-height;
	font-family: inherit;
	font-size: $customer-satisfaction-input-message-font-size;
}

.c-customer-satisfaction-input__button {
	// TODO: Remove this mixin and replace with Brand Context button styles once work to improve them has been carried out
	@include customer-satisfaction-input-button;
}

.c-customer-satisfaction-input a {
	display: inline-block;
	margin-top: $customer-satisfaction-input-link-margin;
	font-family: inherit;
	font-size: $customer-satisfaction-input-message-font-size;
}

.c-customer-satisfaction-input__visually-hidden,
.c-customer-satisfaction-input legend.c-forms__label {
	/* hide visually, not to assistive tech */
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Override Forms Styles */
.c-customer-satisfaction-input .c-forms__label--pictographic-radio svg {
	width: $customer-satisfaction-input-radio-icon-size-narrow;
	height: $customer-satisfaction-input-radio-icon-size-narrow;
	padding: $customer-satisfaction-input-radio-icon-spacing-narrow;
	border-radius: $customer-satisfaction-input-radio-icon-border-radius;
}

.c-customer-satisfaction-input .c-forms__pictographic-radios {
	gap: $customer-satisfaction-input-radio-spacing-narrow;
	justify-content: center;
}

.c-customer-satisfaction-input .c-forms__label {
	font-family: inherit;
	font-size: $customer-satisfaction-input-radio-label-font-size-narrow;
}

@include media-query('sm') {
	.c-customer-satisfaction-input .c-forms__label--pictographic-radio svg {
		width: $customer-satisfaction-input-radio-icon-size-desktop;
		height: $customer-satisfaction-input-radio-icon-size-desktop;
		padding: $customer-satisfaction-input-radio-icon-spacing-desktop;
	}

	.c-customer-satisfaction-input .c-forms__pictographic-radios {
		gap: $customer-satisfaction-input-radio-spacing-desktop;
	}

	.c-customer-satisfaction-input .c-forms__label {
		font-size: $customer-satisfaction-input-radio-label-font-size-desktop;
	}
}

.c-customer-satisfaction-input .c-forms__fieldset--pictographic-radios {
	justify-content: center;
}

.c-customer-satisfaction-input .c-forms__label + .c-forms__label {
	margin-top: 0;
}

.c-customer-satisfaction-input .c-forms__fieldset {
	margin: 0;
}

.c-customer-satisfaction-input .c-forms__error {
	display: none;
	margin-bottom: $customer-satisfaction-input-error-margin;
}

.c-customer-satisfaction-input--show-error .c-forms__error {
	display: flex;
}
