.neve-color-component {
	margin: 0;
	align-items: center;

	.delete {
		margin-left: auto;
		color: #dcdcdc;
		transition: .3s ease;

		&:hover {
			color: $wp-blue;
		}

		& + div {
			margin-left: 0;
		}
	}

	.clear {
		width: 100%;
		justify-content: center;
		border-radius: 0;
	}

	> div {
		margin-left: auto;

		> button {
			height: 30px;
			width: 55px;
			display: block;
			border: 1px solid $input-borders !important;
			position: relative;

			.color, .gradient {
				display: block;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				position: absolute;
			}

			.color {
				z-index: 1;
			}

			.gradient {
				background-image: linear-gradient(45deg,
								#fff 0%, #ccc 0%,
								#ccc 10%, #fff 10%,
								#fff 20%, #ccc 20%,
								#ccc 30%, #fff 30%,
								#fff 40%, #ccc 40%,
								#ccc 50%, #fff 50%,
								#fff 60%, #ccc 60%,
								#ccc 70%, #fff 70%,
								#fff 80%, #ccc 80%,
								#ccc 90%, #fff 90%,
								#fff 100%, #ccc 100%
				) !important;
			}
		}
	}

	input {
		border-color: $input-borders;
		border-radius: 0;
		height: 30px;
		padding: 0 10px;
	}

	.components-color-picker__body {
		padding: 10px;
	}

	.components-color-picker__inputs-field {
		margin-bottom: 0 !important;
	}

	.components-color-picker__inputs-wrapper {
		padding-top: 10px;
	}

	.components-color-picker__inputs-toggle button {
		height: 30px !important;
		padding: 0 5px;
		border-radius: 0;
	}

/*	.components-tooltip {
		display: none !important;
	}*/


	&.allows-global {
		> div:last-child {
			margin-left: 0;
		}

		> div > button {
			width: 27px !important;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #b7c0cc;
			box-shadow: none;

			> .dashicons {
				width: 10px;
			}
		}

		.global-color-picker {
			color: #b7c0cc;
			margin-right: -1px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;

			&:hover {
				color: #b7c0cc;
			}

			&.active {
				color: $wp-blue;
			}
		}
	}
}
