$pill-size: 26px;

.ct-single-palette {
	container-type: inline-size;
}

.ct-color-picker-container {
	display: flex;
	justify-content: flex-end;
	gap: 8px;

	@container (max-width: 260px) {
		gap: 6px;
	}
}

.ct-color-picker-single {

	> 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-image: url('data:image/webp;base64,UklGRjIAAABXRUJQVlA4TCUAAAAvE8AEAA9w7/97/9/7f/7jAYraNmI6AJQ/1xvvMojof2BSvVEBAA==');
		
		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;
			}
		}
	}
}