@import "./pages/_insights.scss";
@import "./pages/_onboarding.scss";
@import "./components/_modal.scss";
@import "./components/faq_groups";

.helpie_faq__woo-metabox {
	.meta-control {
		display: flex;
		align-items: center;
	}
}

$primary-color: #5cb85c;

.helpie-notice {
	& .success-button {
		background: $primary-color;
		border-color: $primary-color;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 $primary-color;
		color: #fff;
		text-shadow: 0 -1px 1px $primary-color, 1px 0 1px $primary-color, 0 1px 1px $primary-color,
			-1px 0 1px $primary-color;
		display: inline-block;
		text-decoration: none !important;
		padding: 5px 20px;
	}
}

.wp-pointer-content {
	& img {
		width: 100%;
	}
}

.helpie-disabled {
	cursor: pointer;

	.csf-fieldset {
		.csf--switcher {
			opacity: 0.3;
		}
	}
}

// Below Styles Only applies of CSF Setting page.
// For: Mock Data Images
.hfaq-csf-mock-data-wrapper {
	& .csf-fieldset {
		& .csf--image-group {
			& .csf--image {
				& img {
					width: 100%;
				}
			}
		}
	}
}

.csf-field.helpie-display-none {
	display: none;
}

.helpiefaq {
	&__premiumTag {
		margin-left: 3px !important;
		color: #ffffff !important;
		background-color: #f1ac2e !important;
		font-size: 10px !important;
		font-weight: 600 !important;
		letter-spacing: 0.5px !important;
		padding: 3px 4px !important;
	}

	&__groupContainer {
		display: flex;

		#edittag,
		#addtag {
			width: 100%;
		}
	}
}

.helpiefaq-notice {
	@apply helpiefaq-border-t-8 helpiefaq-border-solid helpiefaq-flex helpiefaq-shadow helpiefaq-rounded;

	border-left: 0px !important;
	border-top-width: 8px !important;
	border-top: 8px solid var(--helpiefaq-pro-color) !important;

	@apply helpiefaq-mt-2 helpiefaq-mx-1 helpiefaq-p-4 #{!important};

	&__logo {
		@apply helpiefaq-w-20 helpiefaq-h-20 helpiefaq-rounded helpiefaq-mr-4;

		&--small {
			@apply helpiefaq-w-14 helpiefaq-h-14;
		}
	}

	&__body {
		@apply helpiefaq-text-base helpiefaq-flex helpiefaq-items-center helpiefaq-justify-center;
	}

	&__content {
		@apply helpiefaq-font-bold helpiefaq-mr-1;
	}

	&__header {
		@apply helpiefaq-font-bold helpiefaq-text-lg helpiefaq-ml-7 helpiefaq-mb-2;
	}

	&__button {
		@apply helpiefaq-text-white helpiefaq-ml-5 helpiefaq-rounded helpiefaq-no-underline helpiefaq-text-sm helpiefaq-bg-gray-700 hover:helpiefaq-text-white hover:helpiefaq-bg-gray-600 helpiefaq-py-2 helpiefaq-px-4 helpiefaq-font-semibold helpiefaq-text-center;
	}
	&__listitem {
		@apply helpiefaq-flex helpiefaq-items-center;
	}

	&__listitem--icon {
		@apply helpiefaq-w-5 helpiefaq-h-5 helpiefaq-mr-2;
	}

	&__footer {
		@apply helpiefaq-mt-6;
	}

	&__link {
		@apply helpiefaq-text-blue-400 helpiefaq-text-base hover:helpiefaq-text-blue-500;
		&--success {
			@apply helpiefaq-bg-green-500 helpiefaq-text-white helpiefaq-no-underline helpiefaq-rounded helpiefaq-shadow helpiefaq-border-green-600 helpiefaq-border-2 helpiefaq-py-2 helpiefaq-px-4 helpiefaq-font-bold hover:helpiefaq-bg-green-600 hover:helpiefaq-text-white;
		}
	}

	&__divider {
		@apply helpiefaq-px-2;
	}
}