@import "../../stylesheets/2016/css3.less";

.survey-collaboration-content() {
	.feedback-form-input {
		color: @question-text-color;
	}
}
.common-ss-share() {
	> span {
		color: @answer-text-color;
	}

	> a {
		color: @answer-text-color;

		&:hover {
			color: @theme-color;
		}
	}
}
.control-label() {
	color: @answer-text-color;
}

.form-select-variable() {
	color: @question-text-color;
}
.select-wrapper {
	border-color: @answer-text-color;

	&.has-focus {
		border-bottom: 2px solid @theme-color;
	}

	.form-select {
		.form-select-variable();
	}

	&:before {
		color: @answer-text-color;
	}
}
.survey-exit {
	color: @theme-color;

	&:hover {
		color: fade(@theme-color, 70%);
	}

	> i {
		color: @theme-color;

		&:hover {
			color: fade(@theme-color, 70%);
		}
	}
}
.notification-wrapper {
	color: @answer-text-color;
}
.survey-body-wrapper {
	.answer-price-option div {
		color: @answer-text-color;
	}

	.survey-inside-wrapper {
		&.has-interactive-mode {
			.survey-question-wrapper {
				&.active-question {
					> .question-container,
					> .answer-container,
					> .multi-row-question,
					> span.error {
						&:after {
							background: @theme-color;
						}
					}
				}
			}
		}
	}
	.survey-question-wrapper {
		.question-container {
			color: @question-text-color;

			&.required {
				&:before {
					color: @question-text-color;
				}
			}
		}
		.prefix-wrapper,
		.suffix-wrapper {
			color: @answer-text-color;
		}
		.answer-group-header {
			color: @answer-text-color;
		}
		.controls {
			&.control-selection {
				.control-tick {
					color: @theme-color;
				}

				.control-indicator {
					border: 1px solid @element-color;

					&:after {
						background: @element-color;
					}
				}

				input[type="radio"] {
					&:checked {
						~ .control-indicator {
							&:after {
								border: 1px solid @element-color;
							}
						}
					}
				}

				.radio-check {
					&:checked {
						~ .control-letter {
							background-color: @theme-color;
						}
					}
				}

			}
		}
		.form-label {
			color: @answer-text-color;
		}

		.input-wrapper {
			&:before {
				background: @answer-text-color;
			}
		}

		.form-input {
			color: @answer-text-color;
		}

		.line-flow {
			background: @theme-color;
		}

		.answer-container {
			#finishText {
				div {
					color: @theme-color !important;
				}
			}
		}
	}
}

@error-text-color: @question-text-color; //passed question text color to error color for VM

.ts-visual-mode {
	.notification-wrapper {
		span {
			color: @error-text-color;
		}
	}
	.error-wrapper {
		border: 1px solid @error-text-color;
		color: @error-text-color;
	}
	.required() {
		&:before {
			color: @error-text-color;
		}
	}
	.error {
		color: @error-text-color !important;
	}
	.input-wrapper {
		&.error-line {
			.line-flow {
				background: @error-text-color;
			}
		}
	}
	div[style="display: block !important;"] {
		background-color: fade(@option-color, 70%) !important;

		div[style="display: flex !important;"] {
			> span {
				color: @answer-text-color !important;

				> a {
					color: @answer-text-color !important;

					> span {
						color: @answer-text-color !important;
					}
				}
			}
		}
	}
	.branding-survey-footer {
		background-color: fade(@option-color, 70%) !important;

		.survey-footer {
			> a {
				color: @answer-text-color;

				&:last-child {
					> span {
						color:@answer-text-color;
					}
				}
			}
		}
		.sf-share {
			> span {
				color: @answer-text-color;
			}
			> a {
				color: @answer-text-color;
			}
		}
	}
	.autocomplete-suggestions {
		background: @option-color;
		border-color: @option-color;

		.autocomplete-suggestion {
			color: @answer-text-color;

			&.selected {
				background: @highlight-color;
				color: @button-text-color;
			}
		}
	}
	.modern-progress-top-wrapper {
		background: transparent;

		.progress-bar-outer {
			background: fade(@highlight-color, 50%);

			> .progress-bar-inner {
				background: @highlight-color;

				&:after {
					border-top: 10px solid @highlight-color;
				}
			}
		}
	}
	.survey-exit {
		color: @question-text-color;

		> i {
			color: @question-text-color;
		}
	}
	.btn {
		&.btn-start,
		&.btn-submit {
			background: @button-color;
			color: @button-text-color;

			&:hover {
				background: @option-color;
				color: @answer-text-color;
				.box-shadow(none);
			}
		}
		&.btn-error-message {
			background: @error-text-color;

			&:focus,
			&:hover {
				.box-shadow(0 0 10px @error-text-color);
			}
		}
	}
	.take-survey-header {
		.take-survey-title {
			span {
				color: @question-text-color;
			}
		}
	}
	.survey-background-image {
		background-image: unset;
		background-color: @theme-color;

		&.is-fill {
			&:before {
				background-color: @theme-color;
			}
		}
		&.is-gradient {
			&:before {
				.gradient(linear; fade(@theme-color, 75%) 14.69%, fade(@theme-color, 55%) 37.34%, fade(@theme-color, 0%) 81.35%; 180deg);
			}
		}
		&:after {
			background-image: @survey-bg-image;
			background-position: @survey-bg-position;
		}
	}

	.survey-progressbar {
		background: transparent;
	}

	.bootstrap-select {
		&.form-select {
			&.btn-group {
				.dropdown-menu {
					background: @option-color;

					li {
						a {
							color: @answer-text-color;
						}
						&.selected,
						&:hover {
							a {
								background: @highlight-color;
								color: @button-text-color;
							}
						}
					}
				}
			}
			.has-error & .dropdown-toggle,
			.error & .dropdown-toggle {
				border-color: @error-text-color;
			}
		}
	}
	.upload-file-wrapper-new {
		.upload-container {
			.upload-file-limit {
				span {
					color: @answer-text-color;
				}
			}
		}
		.upload-progress {
			.file-progress-wrapper {
				.file-name-wrapper {
					.file-desc {
						span {
							color: @answer-text-color;
						}
					}
					.btn.btn-cancel {
						.material-icons {
							color: @answer-text-color;
						}
					}
				}
			}
		}
	}
	.survey-body-wrapper {
		.print-link {
			> a {
				color: @answer-text-color;
			}
			~ .survey-inside-wrapper {
				background-color: fade(@option-color, 70%);
			}
		}
		.reward-wrapper {
			.coupon-wrapper {
				.coupon-heading,
				.coupon-text {
					color: @theme-color;
				}
			}
		}
		.thank-you-ad {
			background-color: fade(@option-color, 70%);

			.qp-thank-you-adv {
				&:before {
					background-color: fade(@answer-text-color, 70%);
				}
				.form-action-panel {
					.tp-heading,
					.tp-content {
						color: @answer-text-color;
					}
				}
			}
		}
		.thank-you-wrapper {
			background-color: fade(@option-color, 70%);

			.thank-you-header {
				h3,
				h4 {
					color: @answer-text-color;
				}
				h4 {
					&:before {
						background-color: fade(@answer-text-color, 70%);
					}

					span {
						color: @answer-text-color;
					}
				}
			}
			.thank-you-list {
				> ul {
					> li {
						color: @answer-text-color;

						&:before {
							color: @highlight-color;
						}
					}
				}
			}
		}
		.survey-question-wrapper {
			.question-container {
				.question-tip {
					&.help-image {
						color: @question-text-color;
					}
				}
			}
			.form-input {
				background-color: rgba(255, 255, 255, 0.8);
				border-bottom: 2px solid @option-color;
				color: #545E6B;
			}
			.controls {
				&.control-selection {
					.control-label {
						color: @answer-text-color;
					}
				}
			}
			.answer-container {
				.answer-options {
					.select-wrapper {
						background-color: fade(@option-color, 60%);
						border: 2px solid @option-color;

						&:after {
							background-color: @option-color;
						}

						&:hover {
							background-color: fade(@highlight-color, 60%);
							border-color: @highlight-color;

							&:after {
								background-color: @highlight-color;
							}
						}
					}
					.input-wrapper {
						&:before {
							display: none;
						}
						.form-input {
							backdrop-filter: blur(8px);
							background-color: rgba(255, 255, 255, 0.8);
							border-bottom: 2px solid @option-color;
							color: #545E6B;
						}
					}
					.icon-wrapper {
						.fa {
							color: @answer-text-color;
						}
					}
				}
				.input-wrapper {
					&:before {
						background: @highlight-color;
					}
				}
				#finishText {
					div {
						color: @answer-text-color !important;
					}
				}
				&.map-question {
					.answer-options {
						.AnswerText {
							color: @answer-text-color;
						}
					}
				}
				&.form-type-question {
					.answer-options {
						&.required {
							.input-wrapper {
								&:after {
									color: @error-text-color;
								}
							}
						}
					}
				}
				&.age-verification-question {
					.answer-options {
						.control-label {
							color: @answer-text-color;
						}
					}
				}
				&.form-type-question {
					.form-input {
						&:focus {
							~ label {
								color: @answer-text-color;
							}
						}

						~ label {
							color: #545E6B;
						}
					}

				}
				&.text-highlighter-question {
					background-color: rgba(255, 255, 255, 0.8);
					border-bottom: 2px solid @option-color;

					> span {
						color: #545E6B;
					}

					.qp-ts-reset-highlight {
						a {
							color: @option-color;
						}
					}

					~ .qp-ts-highlighter-popover {
						background-color: #ffffff;
					}
				}
				&.calendar-question {
					.answer-options {
						.icon-wrapper {
							background-color: @option-color;

							.ui-datepicker-trigger {
								&.has-focus {
									background-color: @option-color;

									.fa-calendar {
										color: @answer-text-color;
									}
								}
							}
						}
					}
				}
				&.nps-question,
				&.nps-plus-question {
					.answer-options {
						.controls {
							.blinker {
								background-color: fade(@option-color, 60%);
								border: 2px solid @option-color;

								&:hover {
									background-color: fade(@highlight-color, 60%);
									border-color: @highlight-color;
								}
							}
							.control-label {
								color: @answer-text-color;

								&:hover {
									~ .blinker {
										background-color: fade(@highlight-color, 60%);
										border-color: @highlight-color;
									}
								}
							}
							.radio-check {
								&:checked {
									~ .control-label {
										color: @button-text-color;
									}
									~ .blinker {
										background: @highlight-color;
										border-color: @highlight-color;
									}
								}
							}
						}
					}
				}
				&.image-chooser-question {
					.answer-options {
						.controls {
							&.control-selection {
								background-color: fade(@option-color, 60%);
								border: 2px solid @option-color;
								@media only screen and (min-width: 1024px) {
									&:hover {
										background-color: fade(@highlight-color, 60%);
										border-color: @highlight-color;
									}
								}
								&.active {
									background-color: @highlight-color !important;
									border-color: @highlight-color;

									.control-label {
										color: @button-text-color;
									}

									.cr-boundary {
										.cr-image {
											background-color: @highlight-color;
										}
									}
								}
							}
						}
					}
				}
				&.smiley-question,
				&.thumbs-updown-question {
					.answer-options {
						.controls {
							&.control-selection {
								.blinker {
									background-color: fade(@option-color, 60%);
									border: 2px solid @option-color;
								}
								&:hover {
									.blinker {
										background-color: fade(@highlight-color, 60%);
										border-color: @highlight-color;
									}
								}
								&.active {
									.blinker {
										background-color: @highlight-color;
										border-color: @highlight-color;
									}
								}

								.radio-check {
									~ .control-icons {
										&:before {
											color: @answer-text-color;
										}
									}

									&:checked {
										~ .control-label {
											color: @button-text-color;
										}
										~ .control-icons {
											&:before {
												color: @button-text-color;
											}
										}
									}
								}

							}
						}
					}
				}
				&.flex-matrix-question,
				&.matrix-sidebyside-question,
				&.matrix-spreadsheet-question,
				&.matrix-multipoint-question {
					.controls {
						&.control-selection {
							&.active {
								.control-indicator {
									&:after {
										background: transparent;
									}
									&:before {
										color: @button-text-color;
									}
								}

								.radio-check[type="radio"] {
									~ .control-indicator {
										border-color: @button-text-color;

										&:after {
											border-color: @button-text-color;
											background: @button-text-color;
										}
									}
								}
							}
						}
					}
					.parent-table {
						> thead {
							th, td {
								&.has-error {
									background: fade(@error-text-color, 10%);
								}
							}
							> tr {
								> th {
									> .answer-options {
										background-color: fade(@option-color, 60%);
										border: 2px solid @option-color;
									}
								}
								> td {
									> .answer-options {
										background-color: fade(@option-color, 60%);
										border: 2px solid @option-color;

										> .controls {
											&.control-selection {
												@media only screen and (min-width: 1024px) {
													&:hover,
													&.active {
														background: @highlight-color;
													}
												}
												&.active {
													background: @highlight-color;
												}
											}
										}
									}

									.child-table {
										background-color: fade(@option-color, 60%);
										border: 2px solid @option-color;
									}
								}
							}
						}
						> tbody {
							tr, td {
								&.has-error {
									background: fade(@error-text-color, 10%);
								}
							}
							> tr{
								&:not(.error-tr) {
									border-right: 2px solid @option-color;
									border-left: 2px solid @option-color;

									> td {
										background-color: fade(@option-color, 60%);
										border-bottom: 2px solid @option-color;
										border-top: 2px solid @option-color;

										> .controls {
											&.control-selection {
												@media only screen and (min-width: 1024px) {
													&:hover,
													&.active {
														background: @highlight-color;
													}
												}
												&.active {
													background: @highlight-color;
												}
											}
										}
									}
								}
								&.thead-subheading,
								&.thead-heading {
									> td {
										> .child-table,
										> .answer-options {
											background-color: fade(@option-color, 60%);
											border: 2px solid @option-color;
										}
									}
								}
							}
						}
					}
				}
				&.nps-slider-question,
				&.budget-scale-question,
				&.constant-sum-question,
				&.van-westendorp-slider-question,
				&.numeric-slider-question,
				&.bipolar-slider-question,
				&.text-slider-question {
					.loop-wrapper {
						background-color: fade(@option-color, 60%);
						border: 2px solid @option-color;

						&:after {
							background-color: @option-color;
						}

						&:hover {
							background-color: fade(@highlight-color, 60%);
							border-color: @highlight-color;

							&:after {
								background-color: @highlight-color;
							}

							.ui-slider {
								&.ui-widget-content {
									.ui-slider-range {
										background: @option-color;
									}
									.ui-slider-handle {
										&.ui-state-default {
											background: @option-color;
											border-color: @option-color;
										}
									}
								}
							}
						}

						.ui-slider {
							&.ui-widget-content {
								.ui-slider-range {
									background: @highlight-color;
								}
								.ui-slider-handle {
									&.ui-state-default {
										background: @highlight-color;
										border-color: @highlight-color;
									}
								}
							}
						}
					}
				}
				&.constant-sum-question-v2 {
					.loop-wrapper {
						.sl-wrapper{
							.sum-wrapper {
								.input-wrapper {
									&.has-error {
										.form-input {
											background: fade(@error-text-color, 10%);
										}
										.line-flow {
											background: @error-text-color;
										}
									}
								}
							}
						}
					}
				}
				&.video-rating-question {
					.video-slider-wrapper {
						background-color: fade(@option-color, 60%);
						border: 2px solid @option-color;

						.ui-slider {
							&:before {
								background-color: @option-color;
							}
							&.ui-widget-content {
								.ui-slider-range {
									background: @highlight-color;
								}
								.ui-slider-handle {
									&.ui-state-default {
										background: @highlight-color;
										border-color: @highlight-color;
									}
								}
							}
						}
					}
				}
				&.van-westendorp-text-question {
					.answer-options {
						background-color: fade(@option-color, 60%);
						border: 2px solid @option-color;
					}
				}
				&.conjoint-question {
					.parent-table {
						> tbody {
							> tr {
								&:first-child {
									> td {
										&:first-child {
											background-color: fade(@option-color, 60%);
										}
										&.hover,
										&.active {
											background-color: @highlight-color;
										}

										background-color: @option-color;
									}
								}
								> td {
									background-color: fade(@option-color, 60%);
									border: 2px solid @option-color;

									&.hover,
									&.active {
										background-color: fade(@highlight-color, 60%);
										border-color: @highlight-color;
									}
									&:first-child {
										background-color: fade(@option-color, 60%) !important;
										border: 2px solid @option-color !important;
									}
								}
							}
						}
					}
				}
				&.star-rating-question,
				&.pushto-social-question {
					.answer-options {
						.controls {
							&.control-selection {
								background-color: fade(@option-color, 60%);
								border: 2px solid @option-color;

								&:hover {
									background-color: fade(@highlight-color, 60%);
									border: 2px solid @highlight-color;

									.star-rating {
										background: @highlight-color;

										.rating__control {
											&:nth-of-type(1):hover ~ .rating__item:nth-of-type(1),
											&:nth-of-type(2):hover ~ .rating__item:nth-of-type(-n+2),
											&:nth-of-type(3):hover ~ .rating__item:nth-of-type(-n+3),
											&:nth-of-type(4):hover ~ .rating__item:nth-of-type(-n+4),
											&:nth-of-type(5):hover ~ .rating__item:nth-of-type(-n+5){
												color: @option-color;
											}
											&:nth-of-type(1):checked ~ .rating__item:nth-of-type(1),
											&:nth-of-type(2):checked ~ .rating__item:nth-of-type(-n+2),
											&:nth-of-type(3):checked ~ .rating__item:nth-of-type(-n+3),
											&:nth-of-type(4):checked ~ .rating__item:nth-of-type(-n+4),
											&:nth-of-type(5):checked ~ .rating__item:nth-of-type(-n+5){
												color: @option-color;
											}
										}
										.rating__item {
											color: @highlight-color;
											text-shadow: -1px 0 @option-color, 0 1px @option-color, 1px 0 @option-color, 0 -1px @option-color;
										}
									}
								}

								.star-rating {
									background: @option-color;

									.rating__control {
										&:nth-of-type(1):hover ~ .rating__item:nth-of-type(1),
										&:nth-of-type(2):hover ~ .rating__item:nth-of-type(-n+2),
										&:nth-of-type(3):hover ~ .rating__item:nth-of-type(-n+3),
										&:nth-of-type(4):hover ~ .rating__item:nth-of-type(-n+4),
										&:nth-of-type(5):hover ~ .rating__item:nth-of-type(-n+5){
											color: @highlight-color;
										}
										&:nth-of-type(1):checked ~ .rating__item:nth-of-type(1),
										&:nth-of-type(2):checked ~ .rating__item:nth-of-type(-n+2),
										&:nth-of-type(3):checked ~ .rating__item:nth-of-type(-n+3),
										&:nth-of-type(4):checked ~ .rating__item:nth-of-type(-n+4),
										&:nth-of-type(5):checked ~ .rating__item:nth-of-type(-n+5){
											color: @highlight-color;
										}
									}
									.rating__item {
										color: @option-color;
										text-shadow: -1px 0 @highlight-color, 0 1px @highlight-color, 1px 0 @highlight-color, 0 -1px @highlight-color;
									}
								}
							}
						}
					}
				}
				&.pushto-social-question {
					.answer-options {
						&.social-sharing {
							background: @option-color;
						}
						.controls {
							&.control-selection {
								&:hover {
									background-color: fade(@option-color, 60%);
									border: 2px solid @option-color;
								}
							}
						}
					}
				}
				&.card-sorting-question {
					.answer-options {
						> span,
						> .ui-sortable {
							background-color: fade(@option-color, 60%);
							border: 2px solid @option-color;

							.controls {
								background-color: rgba(255, 255, 255, 0.8);

								&.control-selection {
									.control-label {
										color: #545E6B;
									}
								}
							}
						}
						.ui-sortable-container {
							.sortable-loop-wrapper {
								> h2 {
									background-color: @option-color;
									border: 2px solid @option-color;
								}
								.ui-sortable {
									background-color: fade(@option-color, 60%);
									border: 2px solid @option-color;

									.controls {
										background-color: rgba(255, 255, 255, 0.8);

										&.control-selection {
											.control-label {
												color: #545E6B;
											}
										}
									}
								}
							}
						}
					}
				}
				&.multiple-choice-question {
					.controls {
						&.control-selection {
							background-color: fade(@option-color, 60%);
							border: 2px solid @option-color;

							&:before {
								background-color: @option-color;
							}
							@media only screen and (min-width: 1024px) {
								&:hover,
							&.active {
								background-color: fade(@highlight-color, 60%);
								border-color: @highlight-color;

								&:before {
									background-color: @highlight-color;
								}

								.control-label,
								.other-input {
									color: @button-text-color;

									&::placeholder {
										color: @button-text-color;
									}
								}

								.control-indicator {
									border-color: @button-text-color;
								}
							}
							}
							&.active {
								background-color: fade(@highlight-color, 60%);
								border-color: @highlight-color;

								&:before {
									background-color: @highlight-color;
								}

								.control-label,
								.other-input {
									color: @button-text-color;

									&::placeholder {
										color: @button-text-color;
									}
								}

								.control-indicator {
									border-color: @button-text-color;
								}
							}

							&.edit-other {
								.other-input {
									border-color: @option-color;
								}
							}

							.list-type {
								color: @answer-text-color;
							}
							.control-indicator {
								border-color: @answer-text-color;

								&:after {
									background: @answer-text-color;
								}
							}
							input[type="checkbox"] {
								~ .control-indicator {
									&:before {
										color: @answer-text-color;
									}
								}
								&:checked {
									~ .control-indicator {
										&:before {
											color: @button-text-color;
										}
									}
								}
							}
							input[type="radio"] {
								&:checked {
									~ .control-indicator {
										border-color: @button-text-color;

										&:after {
											background: @button-text-color;
											border-color: @button-text-color;
										}
									}
								}
							}
							&.edit-other {
								.other-input {
									&.error-line {
										border-bottom: 1px solid @error-text-color;
									}
								}
							}
						}
					}
				}
			}
			.ok-wrapper {
				.ok-btn {
					background: @button-color;
					color: @button-text-color;

					&:hover {
						background: @option-color;
						color: @answer-text-color;
						.box-shadow(none);
					}
				}
				.btn-prev {
					background-color: @option-color;
					border: 1px solid @option-color;

					&:hover {
						background: @button-color;
						border-color: @button-color;

						> i {
							color: @button-text-color;
						}
					}

					> i {
						color: @answer-text-color;
					}
				}
			}
		}
		.survey-submit-wrapper {
			.btn-save-later,
			.btn-prev,
			.btn-back {
				background-color: @option-color !important;
				border: 1px solid @option-color !important;
				color: @answer-text-color;

				&:hover {
					background: @button-color !important;
					border-color: @button-color !important;
					color: @button-text-color;

					> i {
						color: @button-text-color !important;
					}
				}

				> i {
					color: @answer-text-color !important;
				}
			}
		}
	}
	.modern-progress-top-wrapper {
		.progress-bar-outer {
			> span {
				background: @theme-color;
			}
		}
	}

	.thank-you-ad {
		.qp-thank-you-adv {
			.form-fields {
				&.has-error {
					.custom-form-text {
						.line-flow {
							&:after {
								background: @error-text-color;
							}
						}
					}
				}
				.error {
					color: @error-text-color;
				}
			}
		}
	}
}

.bootstrap-select.form-select {
	> .dropdown-toggle.btn-default {
		color: @answer-text-color;

		.open&,
		&:hover,
		&:focus {
			color: @answer-text-color;
		}
	}
}