/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

$humix-color: #03D8F3;
$base-color: #DCDCDC;
$info-color: #007cba;
$error-color: #cc1818;
$success-color: #4caf50;
$warning-color: #f0b849;

.wp-block-humix-humix-block {
	color: black;
	display: block !important;

	button {
		background-color: $humix-color;
		border: none;
		color: #000;
		cursor: pointer;
		display: inline-block;
		font-size: 12px;
		font-weight: 700;
		margin-top: 20px;
		padding: 10px 12px;
		text-align: center;
		text-decoration: none;
		border-radius: 10px;

		:disabled {
			cursor: pointer;
			background-color: green;
		}
	}

	button[disabled] {
		cursor: default;
		background-color: lighten($humix-color, 30%);
		color: grey;
	}

	.preview-btn-group {
		position: absolute;
		margin: 15px;
		top: 0;
		right: 0;
		z-index: 1;
		margin-top: 0;
	}

	.propagate-notice {
		position: absolute;
		bottom: 0;
		margin: 15px 0;
		width: 100%;
		z-index: 1;
	}

	.preview-block {
		max-width: 640px;
		height: 320px; 
		position: relative;
		margin: 0 auto;
		iframe {
			width: 100%;
			height: 100%;
		}
	}

	.auto-select-preview {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		border: 4px dashed grey;
		padding: 30px;
		background-color: lighten($base-color, 5%);
	}

	.components-radio-control__input[type=radio]:checked {
		background: $humix-color !important;
		border-color: $humix-color !important;
	}
	
	.components-checkbox-control__input[type=checkbox]:checked {
		background: $humix-color !important;
		border-color: $humix-color !important;
	}
	
	.category-selector {
		.components-checkbox-control {
			display: inline-block;
		}
	}
	
	.location-propagation-settings {
		.components-radio-control {
			width: 400px;
		}
	}
	
	.humix-display-type-radio-group {
		.components-button-group {
			display: block;
			margin-bottom: 8px;
			button {
				color: #000000;
				border-color: $humix-color;
			}
			.components-button:first-child {
				border-bottom-left-radius: 10px !important;
				border-top-left-radius: 10px !important;
			}
			.components-button:last-child {
				border-bottom-right-radius: 10px !important;
				border-top-right-radius: 10px !important;
			}
			.is-primary {
				background-color: $humix-color;
			}
			.is-primary:hover:not(:disabled) {
				background-color: #000000 !important;
				color: #ffffff !important;
			}
		}
	}

	.edit-block {
		padding: 30px;
		background-color: $base-color;
	}

	.ezhx-btn-group {
		> button {
			margin-right: 15px;
		}
	}

	.ezhx-notice__loading {
		margin: 0;
	}

	.dashicon {
		margin-right: 6px;
	}

	.ezhx-loading {
		animation: ezhx-icon-spin 1s infinite;
		animation-timing-function: linear;
	}

	.ezhx-warning {
		color: $warning-color;
	}

	.ezhx-success {
		color: $success-color;
	}

	.ezhx-info {
		color: $info-color;
	}

	.ezhx-error {
		color: $error-color;
	}
	 
	 @keyframes ezhx-icon-spin {
		0% {
		   transform: rotate( 0deg );
		}
		100% {
		   transform: rotate( 360deg );
		}
	 }

	.react-dropdown-tree-select {
		.dropdown {
			background-color: white;
			width: 100%;
		}
		.dropdown-content {
			width: 100%;
			z-index: 50;
			padding: 0;
			ul {
				padding-left: 15px;
			}
		}
		.dropdown-trigger {
			border: none;
			display: block;
		}
		.arrow {
			width: auto;
			height: auto;
			top: 0;
			bottom: 0;
			position: relative;
			left: 0;
			margin: 0;
			z-index: 1;
			::after {
				display: none;
			}
		}

		.toggle {
			margin-right: 10px;
			font-style: normal;
		}

		.mode {
			padding-left: 15px;
		}

		.node-leaf {
			padding-left: 30px;
		}

		.no-matches {
			margin-left: 15px;
		}

		.tag {
			padding: 2px 6px;
			background-color: $humix-color;
			border-radius: 5px;
			color: black;
		}

		.search {
			border: none; 
			border-bottom: none;
			outline: none;
			box-shadow: none;
		}
		button {
			margin-top: 0;
			background-color: transparent;
			padding: 5px 6px;
			padding-right: 3px;
		}
	}

	.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after {
		display: none;
	}
	.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.bottom:after {
		display: none;
	}

	.share-feedback-container {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		margin-bottom: -10px;

		.share-feedback-text {
			font-size: 12px;
			color: $info-color;
		}
	}
}