.wp-picker-container {

	&.wp-picker-active {
		position: absolute;
		z-index: 1;
		top: 0;
		@include end(7px);
		background-color: #fff;
		border: solid #fff;
		border-width: 0 10px 0 5px;
		padding-top: 10px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);

		.wp-color-result {
			float: right;
		}

		.wp-picker-input-wrap {
			padding-left: 10px;
			float: left;
		}
	}

	* {
		box-sizing: content-box;
	}

	.iris-picker {
		border: none;
	}
}

.wp-color-result {
	margin: 0;
	width: 48px;
	height: 25px;
	transition: border .5s;
	padding: 0;
	border-radius: 3px;
	border: 1px solid $editor-lightest;

	&, &:focus {
		box-shadow: inset 0 0 0 3px white;
	}

	&, &.wp-picker-open {

		&:after {
			content: none;
		}
	}

	&:hover {
		border: 1px solid $editor-light;
	}

	&:focus,
	&:active {
		outline: 0;
	}
}

.wp-picker-default,
.wp-picker-clear {

	&.button {
		height: 26px;
		width: 48px;
		padding: 0;
		background-color: #d5dadf;
		border-radius: 0 3px 3px 0;
		margin: 0;
	}
}

.wp-color-picker {
	float: left;
	width: 100px;
	max-width: 100px;
	border-radius: 3px 0 0 3px;
	line-height: 1;
}

.wp-picker-holder {

	* {
		box-sizing: content-box;
	}
}

.wp-picker-open {

	~ .wp-picker-holder {
		clear: both;
		margin-bottom: 15px;
	}
}

.qazana-control {

	.wp-picker-container {

		&:not(.wp-picker-active) {
			float: $end;
		}

		&.wp-picker-active {
			transform: translateY(6px);

			.wp-color-result {
				margin-right: 3px;
			}
		}
	}
}
