@import "./variables";
@import "./pre_mixins";

@mixin normalize_button() {
	border: none;
	outline: none;
}

@mixin dashicon() {
	font-family: dashicons;
	display: inline-block;
	line-height: 1;
	font-weight: 400;
	font-style: normal;
	speak: none;
	text-decoration: inherit;
	text-transform: none;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 20px;
	height: 20px;
	font-size: 17px;
	padding: 0px;
	vertical-align: top;
	text-align: center;
	transition: color 0.1s ease-in;
}

@mixin buttonAlignment() {
	&.justify-start {
		justify-content: start;
	}

	&.justify-center {
		justify-content: center;
	}

	&.justify-end {
		justify-content: flex-end;
	}
}

@mixin defaultSubmit() {
	border: none;
	outline: none;
	padding: 10px 25px;
	letter-spacing: 1px;
}

@mixin field() {
	margin: 20px 0px;

	input {
		width: 100%;
		padding: 10px 10px;
		transition: 0.5s;
	}

	& input.error {
		border: 1px solid $danger;
		outline: $danger;

		&:focus {
			border: 1px solid $danger;
			outline: $danger;
		}
	}

	& label.error {
		color: $danger;
	}

	& textarea {
		width: 100%;
		padding: 10px 10px;
		max-width: 100%;
		height: 257px;
		display: block;
	}

	& textarea.error {
		border: 1px solid $danger;
		outline: $danger;

		&:focus {
			border: 1px solid $danger;
			outline: $danger;
		}
	}

	& label {
		& abbr {
			color: $danger;
			font-weight: 600;
		}
	}
}

@mixin checkbox-field($preview_type) {
	@if $preview_type == "backend" {
		& .cwp-checkbox-option {
			display: flex;
			margin: 10px 0px;
			& input[type="text"] {
				width: 100%;
			}

			& input[type="checkbox"] {
				margin: 5px 5px 0px 0px;
			}
		}

		& .cwp-image-preview {
			@include ImagePreview();
		}

		& .cwp-checkbox-controls {
			display: flex;
			justify-content: space-between;
		}

		& button {
			margin: 0px 5px;
		}
	} @else {
		& label {
			& .cwp-checkbox-image {
				margin: 10px 0px;
			}

			& span {
				color: darken($secondaryColor, 20%);
				font-weight: 600;
			}
		}

		& .cwp-checkbox-option {
			display: flex;
			margin: 10px 0px;
			position: relative;
			& label {
				width: 100%;
			}

			& input[type="checkbox"] {
				margin: 5px 5px 0px 0px;
			}

			& input[type="checkbox"].error {
				color: $danger;
			}

			& label.error {
				color: $danger;
				position: absolute;
				bottom: -20px;
			}
		}
	}
}

@mixin radio-field($preview_type) {
	@if $preview_type == "backend" {
		& .cwp-radios-option {
			display: flex;
			margin: 10px 0px;
			& input[type="text"] {
				width: 100%;
			}

			& input[type="radio"] {
				margin: 5px 5px 0px 0px;
			}
		}

		& .cwp-image-preview {
			@include ImagePreview();
		}

		& .cwp-radios-controls {
			display: flex;
			justify-content: space-between;
		}
		& button {
			margin: 0px 5px;
		}
	} @else {
		& label {
			& span {
				color: darken($secondaryColor, 20%);
				font-weight: 600;
			}
			& .cwp-checkbox-image {
				margin: 10px 0px;
			}
		}

		& .cwp-radio-option {
			display: flex;
			margin: 10px 0px;
			position: relative;
			& label {
				width: 100%;
			}

			& input[type="radio"] {
				margin: 5px 5px 0px 0px;
			}
			& label.error {
				color: $danger;
				position: absolute;
				bottom: -20px;
			}
		}
	}
}

@mixin select-field($preview_type) {
	@if $preview_type == "backend" {
		& .cwp-select-option {
			display: flex;
			margin: 10px 0px;
			& input[type="text"] {
				width: 100%;
			}

			& input[type="select"] {
				margin: 5px 5px 0px 0px;
			}
		}

		& select {
			width: 100%;
			max-width: 100%;
		}

		& .cwp-select-controls {
			display: flex;
			justify-content: space-between;
		}
		& button {
			margin: 0px 5px;
		}
	} @else {
		& label {
			& span {
				color: darken($secondaryColor, 20%);
				font-weight: 600;
			}
		}

		& label.error {
			color: $danger;
		}

		& select.error {
			outline: $danger;
			border: 1px solid $danger;
		}

		& {
			display: flex;
			flex-direction: column;
			margin: 10px 0px;

			& label {
				width: 100%;
			}
		}
	}
}

@mixin isRequired($type) {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;

	& h3 {
		font-size: 11px !important;
		margin: 0px 8px !important;
		color: if($type == "noticed", $danger !important, $primaryColor !important);
	}
}

@mixin column() {
	& .cwp-col {
		& .block-list-appender {
			width: 100% !important;
			margin: auto;

			button {
				width: 100% !important;
				margin: 0 !important;
			}
		}

		& .editor-block-list__layout {
			& div[data-type] {
				margin: 0 !important;
			}
		}

		& .cwp-col_inserter {
			flex-direction: column !important;
		}
	}

	& .block-editor-inner-blocks:nth-child(1) {
		& .block-editor-block-list__layout:nth-child(1) {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			& .cwp-col {
				& .block-editor-block-list__layout {
					display: flex;
					flex-direction: column !important;

					& [data-block] {
						width: 100%;
					}
				}

				& .cwp-radios-set,
				& .cwp-checkbox-set,
				& .cwp-select-set {
					& .cwp-radios-option,
					& .cwp-checkbox-option,
					& .cwp-select-option {
						& input[type="text"] {
							width: 100vw !important;
						}
					}
				}
			}

			& [data-type="cwp/column"] {
				width: 100%;
				transform-origin: center center;
				flex: 1 1 auto;
				margin: 0px 10px;

				& .cwp-col_inserter {
					& div[data-type] {
						margin: 0 !important;
					}

					& div:nth-child(1) {
						& button.components-button {
							width: 100% !important;
							margin: auto;
						}
					}
				}
			}
		}
	}
}

@mixin column_introduction() {
	background-color: #eee;
	padding: 30px 10px;

	& h3 {
		margin-left: 10px !important;
	}

	& p {
		margin: 0px 0px 10px 10px;
		font-size: 13px;
	}

	& button.cwp_selector {
		@include normalize_button();
		margin: 0px 10px;
		color: $primaryColor;
		border: 1px solid $primaryColor;
		padding: 10px 14px;

		&:hover {
			background-color: $primaryColor;
			color: #fff;
		}
	}
}

@mixin captcha() {
	& .cwp-captcha-inner {
		@include field();
	}
}

@mixin getSelectiveStyling($icon, $type) {
	& input[type="#{$type}"] {
		opacity: 0;
		position: absolute;
	}

	& input[type="#{$type}"],
	label {
		display: inline-block;
		vertical-align: middle;
		margin: 5px;
		cursor: pointer;
	}
	& label {
		position: relative;
		width: auto;
	}
	& input[type="#{$type}"] + label::before {
		content: "";
		background: #fff;
		border: 2px solid #ddd;
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
		padding: 2px;
		margin-right: 10px;
		border-radius: if($type == "radio", 100%, 0%);
		text-align: center;
	}
	& input[type="#{$type}"]:checked + label::before {
		content: if($type == "radio", "", $icon);
		background: if($type == "radio", #928e8eeb, #fff);
		@include dashicon();
	}
}

@mixin successMessage() {
	border-left: 2px solid green;
	padding: 20px 20px;
	background: #00800030;

	& div.wrapper {
		display: flex;
		justify-content: space-between;

		& span {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
}

//form styles

@mixin bordered() {
	& .cwp-field {
		& input {
			border: 3px solid;
			background-color: transparent;
		}

		& textarea {
			border: 3px solid;
			background-color: transparent;
		}
	}
}

@mixin paper() {
	& .cwp-field {
		& select,
		& textarea,
		& input {
			border-bottom: 2px solid;
			border-top: 1px solid #eee;
			border-right: 1px solid #eee;
			border-left: 1px solid #eee;
			background-color: transparent;

			&:focus {
				outline: none;
				border-bottom: 2px solid $primaryColor;
			}
		}

		&.cwp-radio,
		&.cwp-radios {
			& .cwp-radio-set,
			& .cwp-radios-set {
				& .cwp-radio-option,
				& .cwp-radios-option {
					@include getSelectiveStyling("\f12a", "radio");
				}
			}
		}

		&.cwp-checkbox {
			& .cwp-checkbox-set {
				& .cwp-checkbox-option {
					@include getSelectiveStyling("\f147", "checkbox");
				}
			}
		}
	}
}

@mixin inline-field($margin) {
	display: flex;
	flex-direction: row; //for inline label
	align-items: top;

	& .cwp-switch {
		width: 70px !important;
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}

	& .cwp-radios-option,
	& .cwp-checkbox-option {
		margin: 0px 10px;
	}

	& select {
		width: 100%;
	}

	& div[role="textbox"] {
		display: flex;
		width: auto !important;
		margin: $margin;

		& span {
			margin: 0px 5px;
		}
	}

	& label {
		display: flex;
		width: auto !important;
		margin: $margin;

		& .cwp-checkbox-image {
			margin: 0px 12px;
		}

		& span {
			margin: 0px 5px;
		}
	}
}

@mixin switch() {
	& .cwp-switch {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 34px;
		display: flex;
		margin: 10px 0px;
		flex-direction: column;

		& input {
			opacity: 0;
			width: 0;
			height: 0;

			&:checked + .cwp-slider {
				background-color: #2196f3;
			}

			&:checked + .cwp-slider:before {
				transform: translateX(26px);
			}
		}

		& .cwp-slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ccc;
			-webkit-transition: 0.4s;
			transition: 0.4s;

			& input {
				& input {
					&:focus + .cwp-slider {
						box-shadow: 0 0 1px #2196f3;
					}
				}
			}

			&::before {
				position: absolute;
				content: "";
				height: 26px;
				width: 26px;
				left: 4px;
				bottom: 4px;
				background-color: white;
				-webkit-transition: 0.4s;
				transition: 0.4s;
			}

			& .cwp-round {
				border-radius: 34px;
				&::before {
					border-radius: 50%;
				}
			}
		}
	}
}

@mixin group() {
	& legend {
		margin: 0px 0px 20px 0px;
		padding: 0;
		float: left;
		clear: both;
		font-size: 15px;
	}

	& .cwp-group-fields {
		clear: both;
	}
}

@mixin formulaBuilder() {
	& .cwp-form-available-fields {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		& h4 {
			font-size: 12px;
		}
	}

	& textarea {
		width: 100%;
		max-height: 200px;
		height: 200px;
	}
}

@mixin buttonStyle() {
	& input {
		width: 0;
		height: 0;
		position: absolute;
		left: -9999px;

		& + label {
			margin: 0;
			padding: 0.75rem 2rem;
			box-sizing: border-box;
			position: relative;
			display: inline-block;
			border: solid 1px #ddd;
			background-color: #fff;
			font-size: 1rem;
			line-height: 140%;
			font-weight: 600;
			text-align: center;
			box-shadow: 0 0 0 rgba(255, 255, 255, 0);
			-webkit-transition: border-color 0.15s ease-out, color 0.25s ease-out,
				background-color 0.15s ease-out, box-shadow 0.15s ease-out;
			transition: border-color 0.15s ease-out, color 0.25s ease-out,
				background-color 0.15s ease-out, box-shadow 0.15s ease-out;
		}
	}
}

@mixin sidebar() {
	width: 300px;
	height: 100%;
	margin: -20px 0px 0px 0px;

	border-right: 1px solid #eee;

	& .sidebar__panel_main {
		& button {
			&.is-primary {
				color: #fff !important;
			}
		}
	}

	& .cwp__view {
		margin: 10px 0px;
		padding: 0px 5px 0px 18px;

		& .center {
			text-align: center;
		}
	}
}

@mixin scrollbar() {
	&::-webkit-scrollbar {
		width: 5px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb:hover {
		background: transparent;
	}

	&:hover {
		&::-webkit-scrollbar-track {
			background: #eee;
		}

		&::-webkit-scrollbar-thumb {
			background: #ccc;
		}

		&::-webkit-scrollbar-thumb:hover {
			background: #ccc;
		}
	}
}

@mixin empty() {
	& .placeholder {
		width: 80%;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;

		text-align: center;

		& img {
			width: 60%;
			height: 100%;
		}
	}
}

@mixin settings_modal() {
	.cwp_lib_modal {
		max-width: 100%;
		width: 90%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;

		& .components-modal__header {
			padding: 0 37px 0px 40px !important;
		}

		& .components-modal__content {
			padding: 0px;
		}
	}

	.cwp-main {
		background-color: $secondaryColor;
		text-align: center;
		padding: 30px 0px;
	}

	.cwp_loader {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.cwp__lib {
		display: flex;
		flex-direction: row;
		height: 100%;

		& .cwp__data__wrapper {
			width: 100%;
			position: relative;
			padding: 20px;

			&.templates {
				display: grid;
				grid-template-columns: 50% 50%;
				grid-gap: 10px;

				& .cwp-templates {
					height: 400px;

					& .components-menu-group {
						height: 490px;
						overflow-y: scroll;
						@include scrollbar();
					}
				}
			}

			&.cpt {
				& .cwp-empty {
					@include empty();
				}
			}

			& .cwp-post-type {
				margin: 20px 0px;
				& .cwp_post_type_header {
					display: flex;
					justify-content: space-between;

					& div {
						display: flex;

						& svg {
							margin: auto 5px;
						}
					}

					& h3 {
						margin: auto 0px;
					}
				}
			}

			& .cwp__header {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0px 24px;

				& .cwp_selected__catagory {
					& h3 {
						margin: 0;
					}
				}

				& .cwp__search {
					width: 300px;
				}
			}

			& .cwp__data {
				margin: 0px 0px 100px 0px;

				& .cwp_preview_block {
					height: 500px;

					& .cwp-media {
						height: 100%;
						overflow-y: scroll;

						@include scrollbar();
					}

					& .foot {
						& button {
							width: 100%;
							border-radius: 0px;
							justify-content: center;
						}
					}
				}
			}
		}

		& .cwp__sidebar {
			@include sidebar();
		}

		& .cwp__content {
			overflow-y: scroll;
		}
	}
}

@mixin reusable_form() {
	position: relative;
	.cwp-reusable-intro {
		.content {
			width: 100%;
			display: flex;

			.cwp-reusable-select {
				min-width: 300px;
				margin-right: 5px;

				select {
					min-height: 30px;
				}
			}

			button {
				padding: 0px 14px !important;
				min-height: 30px;
			}
		}
	}
	.cwp-rendered-content {
		background-color: #fff;
		padding: 20px;
		border: 1px solid rgb(49, 49, 49);
		pointer-events: none !important;
	}
}

@mixin hidden-field() {
	display: flex;

	.cwp-tag-opener {
		margin-left: 5px;
		height: 100%;
	}

	@include field();
}

@mixin basic_scrollbar() {
	&::-webkit-scrollbar {
		width: 5px;
	}

	/* Track */
	&::-webkit-scrollbar-track {
		border-radius: 0px;
		background-color: #ccc;
	}

	/* Handle */
	&::-webkit-scrollbar-thumb {
		background: grey;
		border-radius: 10px;
	}

	/* Handle on hover */
	&::-webkit-scrollbar-thumb:hover {
		background: grey;
	}
}

@mixin tag_selector() {
	padding: 5px;

	.cwp-tag-selector-content {
		.cwp-tag-search {
			padding: 10px 10px 0px 10px;
		}
		div[role="tablist"] {
			background-color: #eee;
		}

		.ep-filtered-tags {
			height: 250px;
			overflow-y: scroll;
			padding: 10px;
			@include basic_scrollbar();

			.cwp-not-found {
				height: 100%;
				background-color: #eee;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.ep-filtered-group {
				background-color: #eee;
				padding: 10px 5px;
			}
		}

		.cwp-tags {
			padding: 10px;

			.cwp-tagList {
				&:not(.no-styling) {
					height: 250px;
					overflow-y: scroll;
				}

				.cwp-empty-list {
					background-color: #eee;
					display: flex;
					height: 100%;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					margin: 10px 0px 0px 0px;
				}

				.cwp-tag-option {
					display: flex;
					justify-content: space-between;
				}

				@include basic_scrollbar();
			}

			.cwp-active-tag-panel {
				border-bottom: 1px solid;
			}

			.cwp-tag-button {
				border-radius: 0px !important;
			}
		}
	}

	.components-popover__content {
		min-width: 320px !important;
	}
}

@mixin Progressbar($viewPage) {
	.bar-fill {
		@if ($viewPage == "backend") {
			width: 50%;
		} @else {
			width: 0%;
		}

		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		span {
			color: #fff;
			padding: 0px 10px;
		}
	}
}

@mixin Alert($color) {
	background-color: lighten($color, 30%);
	border-left: 2px solid darken($color, 50%);
	padding: 20px 20px;
}