$pill-size: 26px;


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

.ct-color-picker-single {

	&:not(:last-child) {
		margin-right: 10px;
	}

	> 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, -38px, 0px);
				}
			}
		}
	}


	// no color pill
	&.ct-no-color > span span {
		background: rgba(255, 255, 255, 0.8);

		&:after {
			position: absolute;
			content: '';
			width: 12px;
			height: 2px;
			background: #e60606;
			border-radius: 2px;
			transform: rotate(-40deg);
		}
	}
}