.color-input {
	cursor: pointer;
	display: flex;
	flex-direction: row;
	height: 32px;

	& .color-input-hex {
		border-radius: 4px 0 0 4px;
		border: 0;
		height: 100%;
		font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: var(--app-font-color);
		padding: 0 0.5em;
		width: 50%;
		margin: 0;
		background-color: var(--background-color);
		font-size: 0.9em;
	}

	& .color-input-trigger-container {
		width: 50%;
		height: 100%;

		& .popover-container {
			height: 100%;

			& .popover-trigger {
				width: 100%;
				height: 100%;
			}
			& .popover {
				padding: 0;
			}
		}
	}

	& .color-input-trigger {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0 4px 4px 0;

		& calcite-icon {
			color: white;
			mix-blend-mode: difference;
			isolation: isolate;
		}
	}
}

/* Sketch-Picker overrides */
.w-color-sketch {
	--sketch-background: var(--background-color) !important;
	--sketch-box-shadow: none !important;

	& .w-color-interactive.w-color-saturation {
		height: 180px !important;
	}

	& .w-color-editable-input {
		& input {
			font-size: 12px !important;
			color: var(--app-font-color) !important;
		}
	}
}