@import './variables/variables';
// Abstract: For label and checkbox paired field.

$or-color: #3779ff;
$and-color: #ffa225;
$not-color: #FF7474;
$or-line: #89A7E5;
$and-line: #F9E2CA;
$not-line: #F9CACA;
$or-tag: #E9F0FE;
$and-tag: #FED9A8;
$not-tag: #F9CACA;

.user-registration-content-restriction {
	*,
	::before,
	::after {
		box-sizing: border-box;
	}
}

.urcr-label-checkbox-pair {
	display: flex;
	align-items: center;
	padding: 5px 0;

	.urcr-label {
		padding-bottom: 3px;
	}
	.urcr-input {
		margin-right: 8px;
	}
}

// Abstract: Half or 50% width.
.urcr-hw {
	width: 50%;
}


.urcr-content-access-rule-creator-form {
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	margin-top: 24px;

	@media (min-width: 768px) {
	max-width: 700px;
	}

	@media (min-width: 992px) {
	max-width: 900px;
	}

	@media (min-width: 1200px) {
		max-width: 1080px;
	}
}


// Fix CSS: For WP widget UI used for URCR settings.
.urcr-settings-widget {
	border-style: dashed;
	margin-bottom: 10px;

	.urcr-settings-widget-header {
		cursor: pointer;

		.handlediv {
			height: auto;
			width: auto;
		}
	}

	.inside {
		margin: 0;
	}
	.user-registration-help-tip {
		top: 5px;
		&::after {
			width: 16px !important;
		}
	}
}

// Fix CSS: For the rule creator tabs.

.nav-tab-wrapper {
	max-width: 675px;
	margin: 0 auto 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #BABABA;

	.urcr-tab {
		width: 225px;
		margin: 0;
		color: #777;
		text-transform: uppercase;
		border: none !important;
		background: none;
		padding: 10px 20px 16px;
		cursor: pointer;
		position: relative;
		text-align: center;

		&:focus {
			outline: none;
			box-shadow: none;
		}

		&:before {
			content: '';
			position: absolute;
			bottom: -1px;
			left: 0;
			width: 0;
			height: 2px;
			background-color: #6C7CC1;
			transition: all 0.3s ease-in-out;
		}

		&.nav-tab-active,
		&:hover {
			color: #6C7CC1;
			background-color: #f2f2f2;
		}

		&.nav-tab-active:before,
		&:hover:before {
			width: 100%;
		}

		&:first-child {
			margin-left: 0;
		}
	}
}

// Conditional Logic Group Section
.urcr-tab-contents-wrapper {
	padding-top: 14px;

	.urcr-tab-content {
		.urcr-settings-widget {
			padding: 20px 26px;
			background: #FFFFFF;
			border: 1px solid #EDF2F7;
			border-radius: $border_radius_4;
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}

			&-header {
				padding: 0;

				.hndle {
					.urcr-widget-header-label {
						line-height: 140%;
						color: #222;
					}

					.user-registration-button-group {
						margin-left: 12px !important;
						background: #F0F0F1;
						border-radius: 50px;
						padding: 3px;

						.urbg-item {
							background: transparent;
							border: 1px solid transparent;
							box-shadow: none;
							padding: 0 14px;
							border-radius: 50px;
							line-height: 18px;
							font-size: 14px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 600;
							margin-bottom: 0;

							&.is-active {
								&[data-value="OR"] {
									color: $or-color;
									background: #fff;
									border-color: $or-color;
									box-shadow: 0px 1px 3px rgba(71, 91, 178, 0.12), 0px 1px 2px rgba(71, 91, 178, 0.24);
								}

								&[data-value="AND"] {
									color: $and-color;
									background: #fff;
									border-color: $and-color;
									box-shadow: 0px 1px 3px rgba(171, 126, 65, 0.12), 0px 1px 2px rgba(174, 131, 74, 0.24);
								}

								&[data-value="NOT"] {
									color: $not-color;
									background: #fff;
									border-color: $not-color;
									box-shadow: 0px 1px 3px rgba(180, 73, 73, 0.12), 0px 1px 2px rgba(176, 70, 70, 0.24);
								}
							}
						}
					}

					.ur-d-flex {
						align-items: center;
						gap: 6px;
					}

					.urcr-add-new-conditional-logic-field,
					.urcr-add-new-conditional-logic-group {
						font-weight: 600;
						font-size: 13px;
						line-height: 150%;
						color: #575757;
						width: 100px;
						padding: 6px 12px;
						background: #f2f2f2 !important;
						border: 1px solid #f2f2f2;
						border-radius: 3px;
						box-shadow: none;
					}

					.urcr-add-new-conditional-logic-group {
						margin-left: 0;
						margin-right: 0;
					}

					.handlediv {
						margin-left: 0;
						width: 28px;
						height: 28px;
						box-shadow: none;
						background: #fff;
						border: 1px solid #6C7CC1;
						border-radius: 3px;
					}
				}
			}

			.inside {
				margin-top: 16px;
				padding-top: 20px !important;
				padding-left: 0;
				padding-right: 0;
				padding-bottom: 0;

				.urcr-conditional-logic-definitions {
					position: relative;

					&:has(.urcr-logic-group-rule-OR),
					&:has(.urcr-logic-group-rule-AND),
					&:has(.urcr-logic-group-rule-NOT) {
						padding-left: 42px;
					}

					.urcr-logic-group-rule-OR {
						content: "";
						position: absolute;
						top: 0;
						left: 5px;
						background: $or-line;
						width: 2px;
						height: 100%;

						&::before,
						&::after {
							content: "";
							position: absolute;
							left: 0;
							width: 22px;
							height: 2px;
							background: $or-line;
						}

						&::before {
							top: 0;
						}

						&::after {
							bottom: 0;
						}
					}

					.urcr-logic-group-rule-AND {
						content: "";
						position: absolute;
						top: 0;
						left: 5px;
						background: $and-line;
						width: 2px;
						height: 100%;

						&::before,
						&::after {
							content: "";
							position: absolute;
							left: 0;
							width: 22px;
							height: 2px;
							background: $and-line;
						}

						&::before {
							top: 0;
						}

						&::after {
							bottom: 0;
						}
					}

					.urcr-logic-group-rule-NOT {
						content: "";
						position: absolute;
						top: 0;
						left: 5px;
						background: $not-line;
						width: 2px;
						height: 100%;

						&::before,
						&::after {
							content: "";
							position: absolute;
							left: 0;
							width: 22px;
							height: 2px;
							background: $not-line;
						}

						&::before {
							top: 0;
						}

						&::after {
							bottom: 0;
						}
					}

					.ur-row {
						margin-left: 0;
						margin-right: 0;
						flex-wrap: nowrap;
					}

					.ur-form-group {
						margin-bottom: 20px;

						@media (max-width: 991px) {
							flex-direction: column;
							align-items: unset !important;
							gap: 16px;

							.urcr-label-container {
								max-width: 100%;
								flex: unset;
							}

							.ur-row {
								max-width: 100%;
								flex: unset;
							}
						}

						.urcr-form-fields-wrapper {
							padding: 16px;
							background: #f4f4f4;
							margin-top: 12px;
							border-radius: 4px;
							flex-direction: column;
							gap: 8px;
							display: none;

							&:has(.ur_form_fields_row) {
								display: flex;
							}

							.ur_form_fields_row {
								display: flex;
								align-items: center;
								gap: 6px;
								flex-direction: column;

								@media (min-width: 601px) {
									flex-direction: row;
								}

								select,
								input {
									height: 36px !important;

									&.urcr_form_field_name {
										width: 100%;

										@media (min-width: 601px) {
											width: 130px;
										}
									}

									&.urcr_form_field_logic {
										width: 100%;

										@media (min-width: 601px) {
											width: 70px;
										}
									}

									&.urcr_form_field_value {
										width: 100%;
									}
								}

								a {
									padding: 8px;
									display: flex;
									align-items: center;
									justify-content: center;
									background: #fff;
									border-radius: 4px;
									font-size: 18px;
									line-height: 28px;
									cursor: pointer;
									border: 1px solid #e1e1e1;
									transition: all .3s ease-in-out;

									svg {
										width: 16px;
										height: 16px;
									}

									&:hover {
										border-color: #e3e3e3;
										background: #e3e3e3;
									}
								}
							}
						}
					}

					.urcr-label-input-pair {
						.urcr-input-container {
							> select {
								margin-right: 8px;
							}

							.user-registration-button-group {
								gap: 10px;

								.urbg-item {
									padding: 6px 10px 6px 8px;
									background: #FFFFFF;
									border: 1px solid #E1E1E1;
									border-radius: 3px;
									box-shadow: none;
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									display: flex;
									flex-direction: row-reverse;
									align-items: center;
									gap: 8px;
									color: #6B6B6B;
									position: relative;

									&:focus {
										outline: none;
										box-shadow: none;
									}

									&:focus-visible {
										outline: none;
									}

									&::before,
									&::after {
										content: "";
										background: #e1e1e1;
										border-radius: 50%;
									}

									&::before {
										position: absolute;
										top: 50%;
										left: 12px;
										transform: translateY(-50%);
										width: 10px;
										height: 10px;
										opacity: 0;
										transition: all .3s ease-in-out;
									}

									&::after {
										display: block;
										width: 18px;
										height: 18px;
										background: transparent;
										border: 1px solid #BDBDBD;
									}

									&.is-active {
										border-color: #475bb2;
										color: #475BB2;

										&::before {
											opacity: 1;
											background: #475BB2;
										}

										&::after {
											border-color: #475BB2;
										}
									}
								}
							}
						}
					}

					.urcr-sub-logic-group-rule-OR,
					.urcr-sub-logic-group-rule-AND,
					.urcr-sub-logic-group-rule-NOT {
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
						padding: 4px 10px;
						border-radius: 50px;
						color: #383838;
						font-size: 13px;
						line-height: 120%;
						font-weight: 600;
					}

					.urcr-sub-logic-group-rule-OR {
						background: $or-tag;
						left: -17px;
					}

					.urcr-sub-logic-group-rule-AND {
						background: $and-tag;
						left: -21px;
					}

					.urcr-sub-logic-group-rule-NOT {
						background: $not-tag;
						left: -21px;
					}
				}

				.select2-container {
					.select2-selection {
						&__rendered {
							padding-left: 0;
							gap: 6px;
							flex-wrap: wrap;
						}

						&__choice {
							margin-left: 0;
							margin-right: 0;
							padding: 4px 10px;
							background: #E9E9E9;
							border-radius: 3px;
							border-color: #e9e9e9;
							flex-direction: row-reverse;
							gap: 6px;
							padding-right: 6px;

							&__remove {
								font-size: 18px;
								line-height: 18px;
								position: relative;
								top: -1px;
							}
						}

						&.select2-selection--single {
							height: 38px;
							border: 1px solid #e1e1e1;

							.select2-selection__rendered {
								padding-left: 10px;
								line-height: 36px;
							}

							.select2-selection__arrow {
								top: 4px;

								b {
									margin-top: -2px;
									margin-left: -8px;
								}
							}
						}
					}
				}

				.urcr-notice {
					&.urcr-notice-warning {
						padding: 14px 20px;
						background: #FEFCE8;
						border: 0;
						border-left: 3px solid #FFC700;
						box-shadow: none;

						p {
							margin: 0;
							font-weight: 400;
							line-height: 150%;
							color: #D38413;
						}
					}
				}
			}

			// Trash Button Styling
			.urcr-trash {
				width: 34px;
				height: 34px;
				background: #F4F4F4;
				border: 1px solid #FFFFFF;
				border-radius: 5px;
				box-shadow: none;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all .3s ease-in-out;
				margin-left: 0;

				span {
					color: #949494;
					position: relative;
					left: 1px;
				}

				&:hover {
					background: #FFF4F4;
					border-color: #F25656;

					span {
						color: #F25656;
					}
				}
			}

			input[type="text"],
			input[type="email"],
			input[type="password"],
			input[type="number"],
			textarea,
			select {
				height: 34px !important;
				border-color: #E1E1E1;

				&:focus {
					border-color: #475bb2;
					outline: none;
					box-shadow: none;
				}
			}

			&.closed {
				.handlediv {
					width: 28px;
					height: 28px;
					box-shadow: none;
					background: #fff;
					border: 1px solid #c1c1c1;
					border-radius: 3px;
				}
			}
		}
	}
}


// Individual: The 'Enable time limit' option.
#urcr-enable-time-limit {
	margin-top: 15px;
}

// Fix: Tooltip.
#tiptip_holder {
	top: -35px !important;
}

.urcr-add-new-conditional-logic-field {
	width: 105px;
	font-size: 12px;
	margin-right: 3px;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	text-indent: 1px !important;
	text-overflow: '' !important;
	background: none !important;

	&::-ms-expand {
		display: none !important;
	}
}

.urcrra-redirect-input-container {
	.urcr-input {
		width: 100%;
		margin-bottom: 10px;
	}
}

.urcrra-shortcode-args {
	margin-top: 5px;
}

.urcr-notice {
	background: #fff;
    border: 1px solid #ccd0d4;
	border-left-color: rgb(204, 208, 212);
    border-left-width: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
	padding: 1px 12px;

	&.urcr-notice-warning {
		border-left-color: #ffb900;
	}
}

.urcr-puncher {
	flex-grow: 1;
}

.urcr-enable-access-rule-container {
	margin-bottom: 25px;
	user-select: none;

	.urcr-enable-access-rule-switch {
		margin-right: 10px;
	}
	.urcr-enable-access-rule-label {
		font-weight: bold;
	}
}

p.urcr-conditional-logic-warning {
	padding: 14px 20px;
    background: #fefce8;
    border: 0;
    border-left: 3px solid #ffc700;
    box-shadow: none;
}

input[type="checkbox"] {
	&.urcr-enable-access-rule {
		display: none;

		background: $color_gray_two;
		width: 28px;
		height: 18px;
		border-radius: 10px !important;
		display: flex;
		align-items: center;
		flex: 0 0 28px;
		margin: 0;
		position: relative;
		border: 2px solid $color_gray_two;
		transition: 0.1s transform ease;
		box-sizing: border-box;

		&::before {
			content: none;
		}

		&::after {
			display: inline-block;
			content: "";
			height: 14px;
			width: 14px;
			background: $white;
			border-radius: 50%;
			position: absolute;
			transition: 0.1s transform ease;
		}

		&:checked {
			background: $green;
			border-color: $green;

			&::after {
				transform: translateX(10px);
			}
		}
	}
}
