$pill-size: 26px;


.ct-color-picker-container {
	display: flex;
	justify-content: flex-end;
}

.ct-color-picker-single {

	&:not(:last-child) {
		margin-inline-end: 6px;
	}

	> span {
		display: flex;
		width: $pill-size;
		height: $pill-size;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		background-size: 10px 10px;
		background-position: 0 0, 0 5px, 5px -5px, -5px 0;
		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%);

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

			&:focus {
				outline: none;
			}

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