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

	.delete {
		margin-left: auto;
		color: #dcdcdc;
		transition: 0.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;
			}
		}
	}
}
