$error-red: #d63638;

#o-feedback {
	padding: 15px;

	&.is-link {
		text-decoration: none;
	}
}

.o-feedback-modal-overlay {
	z-index: 999999999; /* to be visible from dynamic images */
}

.o-feedback-form {
	.invalid textarea {
		border-color: $error-red;
		box-shadow: 0 0 0 calc( 1.5px - 1px ) $error-red;
		outline: transparent solid 2px;
	}

	.invalid p, .f-error p {
		color: $error-red;
	}

	.buttons-wrap {
		display: flex;
		justify-content: space-between;
		margin-top: 14px;
	}

	.f-send {
		min-width: 112px;

		> svg {
			margin: 0 auto;
		}
	}

	.toggle-info {
		text-decoration: none;
	}

	.info {
		color: #757575;
		overflow: hidden;
		height: 0;
		transition: .2s ease-out;

		.wrapper {
			padding-bottom: 3px;

			> p {
				margin-top: 0;
			}
		}
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #cbcbcb;

		p {
			margin: 6px 0 !important;
		}
	}
}

.o-feedback-modal {
	width: 490px;
	border-radius: 10px;
	overflow: visible;

	&.no-header {
		.components-modal__content {
			margin-top: 0;
			padding-top: 24px;

			&::before {
				display: none;
			}
		}

		.components-modal__header {
			display: none;
		}
	}

	.components-modal__header {
		border: none;
	}

	.components-modal__header-heading {
		font-weight: 400;
		font-size: 20px;
	}
}

.finish-feedback {
	text-align: center;

	.f-title {
		font-size: 23px;
		line-height: 28px;
		margin: .5em 0;
	}

	.f-description {
		width: 60%;
		margin: 0 auto 20px !important;
	}

	button.f-done {
		padding: 0 30px;
	}
}
