// color picker modal
.ct-color-picker-modal {
	position: absolute;
	z-index: 35;
	top: 40px;
	width: 255px;
	background: #fff;
	margin-bottom: 30px;
	text-indent: initial;
	border-radius: 8px;
	box-sizing: border-box;
	transform-origin: center top;
	// box-shadow: 0 5px 27px rgba(0, 0, 0, 0.15);
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.08);
}

.ct-color-modal-wrapper .ct-arrow {
	position: absolute;
	z-index: 30;
	bottom: -13px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 7px 6px;
	border-color: transparent transparent #ffffff transparent;
}

// color top
.ct-color-picker-top {
	display: flex;
	padding: 17px;
	border-bottom: 1px solid #eee;
}

.ct-color-picker-skins {
	display: flex;
	margin: 0;

	li {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 24px;
		height: 24px;
		border-radius: 100%;
		margin-bottom: 0;
		cursor: pointer;
		box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.09);

		&:not(:last-child) {
			margin-right: 15px;
		}

		&.active {
			box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.09), 0px 0px 0px 3px #fff;

			&:before {
				position: absolute;
				content: '';
				z-index: -1;
				width: calc(100% + 8px);
				height: calc(100% + 8px);
				background: rgba(216, 216, 216, 0.7);
				border-radius: 100%;
			}

			&:after {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				left: -1px;
				right: 0;
				bottom: 0;
				font-family: dashicons;
				font-size: 14px;
				line-height: normal;
				color: #fff;
				content: '\f147';
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
			}
		}

		&:hover {
			.ct-tooltip-top {
				opacity: 1;
				visibility: visible;
				transform: translate3d(0px, -38px, 0px);
			}
		}
	}
}

// color picker holder
.ct-color-modal-wrapper {
	.wp-picker-holder {
		padding: 20px 17px;
		margin-bottom: 20px;
		border-bottom: 1px solid #eee;

		> .iris-picker {
			display: block !important;
			width: initial !important;
			height: initial !important;
			border: none;
			border-radius: initial;

			> .iris-picker-inner {
				display: flex;
				// justify-content: space-between;
				position: static;
			}

			.iris-square {
				// flex: 1 0 auto;
				width: 180px !important;
				height: 170px !important;
				margin-right: 0;
				border-radius: 5px;

				.iris-square-inner {
					border-radius: inherit;
					box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
				}
			}

			.iris-square-value {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 0px !important;
				height: 0px !important;

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

				.iris-square-handle {
					top: -9px;
					left: -9px;
					width: 18px;
					height: 18px;
					border: none;
					opacity: 0.9 !important;
					box-shadow: 0 0 3px rgba(0, 0, 0, 0.4) !important;

					&:after {
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						border-color: #fff;
						box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
					}
				}
			}

			.iris-slider {
				width: 20px !important;
				height: initial !important;
				float: none;
				margin-left: 13px;
				border-radius: 15px;
				box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);

				.ui-slider-handle {
					&:focus {
						box-shadow: none;
					}
				}

				.iris-slider-offset {
					top: 18px;
					bottom: 2px;
				}
			}

			.iris-strip .ui-slider-handle {
				width: 16px;
				height: 16px;
				left: 2px;
				right: 2px;
				// opacity: 1;
				border-width: 3px;
				border-color: #fff;
				box-sizing: border-box;
				border-radius: 100%;
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

				&:before {
					display: none;
				}

				&:after {
					position: absolute;
					z-index: -1;
					content: '';
					// top: -6px;
					// left: -6px;
					width: 10px;
					height: 10px;
					// background: red;
					border-radius: inherit;
					box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
				}
			}
		}
	}
}

// color picker bottom
.ct-color-picker-bottom {
	padding: 0 17px 17px 17px;

	.ct-color-picker-input {
		input {
			font-size: 12px;
			width: 100%;
			height: 25px;
			border-radius: 3px;
		}
	}
}

.ct-color-picker-container {
	display: flex;
	padding-right: 3px;
}

// color pill
.ct-color-picker-single {
	display: inline-flex;
	flex-direction: column;
	position: relative;

	> span {
		align-self: center;
		display: flex;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.8);
		background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
			linear-gradient(-45deg, #ddd 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #ddd 75%),
			linear-gradient(-45deg, transparent 75%, #ddd 75%);
		background-size: 10px 10px;
		background-position: 0 0, 0 5px, 5px -5px, -5px 0;

		> span {
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			width: inherit;
			height: inherit;
			position: relative;
			box-sizing: border-box;
			text-decoration: none;
			border-radius: inherit;
			// box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15);
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);

			&:focus {
				outline: none;
			}

			&:after {
				position: absolute;
				z-index: -1;
				content: '';
				opacity: 0.5;
				width: calc(100% + 6px);
				height: calc(100% + 6px);
				background: inherit;
				border-radius: inherit;
				box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
			}


			&:hover {
				.ct-tooltip-top {
					opacity: 1;
					visibility: visible;
					transform: translate3d(0px, -38px, 0px);
				}
			}
		}

		&:focus {
			outline: none;
		}
	}

	&:not(:last-of-type) {
		margin-right: 10px;
	}
}

// no color
.ct-no-color-pill,
.ct-no-color > span > span {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.8);

	&:before {
		position: absolute;
		content: '';
		height: 2px;
		background: #e60606;
		border-radius: 2px;
		transform: rotate(-40deg);
	}
}

.ct-no-color-pill {
	position: relative;
	font-size: 0;
	width: 24px;
	height: 24px;
	margin-left: 15px;
	border-radius: 100%;
	cursor: pointer;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.09);

	&:before {
		width: 14px;
	}

	&:hover {
		.ct-tooltip-top {
			opacity: 1;
			visibility: visible;
			transform: translate3d(0px, -38px, 0px);
		}
	}

	&.active {
		box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.09), 0px 0px 0px 3px #fff;

		&:after {
			position: absolute;
			content: '';
			z-index: -1;
			width: calc(100% + 8px);
			height: calc(100% + 8px);
			background: rgba(216, 216, 216, 0.5);
			border-radius: 100%;
		}
	}
}

.ct-no-color > span > span {
	&:before {
		width: 12px;
	}

	&:after {
		box-shadow: none;
	}
}