$pill-size: 24px;


.ct-color-picker-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 17px;
	border-bottom: 1px solid #eee;
}


// color palette
.ct-color-picker-skins {
	display: flex;
	margin: 0;

	li {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: $pill-size;
		height: $pill-size;
		margin-bottom: 0;
		cursor: pointer;
		border-radius: 100%;
		box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.09);

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

		&.active {
			box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.09), 0px 0px 0px 3px #fff;

			&:before {
				position: absolute;
				content: '';
				z-index: -1;
				width: calc(100% + 8px);
				height: calc(100% + 8px);
				background: rgba(0, 0, 0, 0.07);
				border-radius: 100%;
			}

			&:after {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 1px;
				left: -1px;
				right: 0;
				bottom: 0;
				content: '\f147';
				font-family: dashicons;
				font-size: 15px;
				color: #fff;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
			}
		}

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

			&:after {
				top: initial;
				left: initial;
				right: initial;
				bottom: initial;
				content: '';
				width: 14px;
				height: 2px;
				background: #e60606;
				border-radius: 2px;
				transform: rotate(-40deg);
			}
		}
	}
}


// edit palette button
.ct-edit-palette {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;

	span {
		width: $pill-size;
		height: $pill-size;
		overflow: hidden;
		border-radius: 100%;
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.4);

		svg {
			opacity: 0.9;
			width: inherit;
			height: inherit;
			filter: blur(0.2em);
			transform: scale(1.3);
		}
	}

	&:focus {
		outline: none;
		box-shadow: none;
	}
}



// tooltips
.ct-edit-palette,
.ct-color-picker-skins li {
	&:hover {
		.ct-tooltip-top {
			opacity: 1;
			visibility: visible;
			transform: translate3d(0px, -38px, 0px);
		}
	}
}