/*
 * Search by colour ([colour_search]). The hero, grid, cards and explore chips
 * come from hero.css, core.css and landing.css; this is the picker, the match
 * tag on each card and the results header.
 */

/* Picker in the hero */
.cs-picker {
	display: flex; align-items: center; gap: 8px;
	width: min(520px, 100%); margin: 22px auto 0; padding: 7px;
	background: rgba(255, 255, 255, .92); border: 1px solid rgba(0, 0, 0, .06); border-radius: 999px;
	box-shadow: 0 10px 30px rgba(20, 10, 60, .10);
}
.cs-swatch {
	position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; overflow: hidden;
}
.cs-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cs-picker #cs-hex {
	flex: 1; min-width: 0; height: 44px; padding: 0 6px !important; margin: 0 !important;
	border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
	font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; font-size: 17px !important; font-weight: 600; letter-spacing: .02em; color: #111 !important; text-transform: uppercase;
}
.cs-picker #cs-hex.bad { color: #B42318 !important; }
.cs-go {
	flex-shrink: 0; height: 44px; padding: 0 22px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important;
	background: #111 !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; box-shadow: none !important;
}
.cs-go:hover { background: #333 !important; }

.cs-presets { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 16px auto 0; max-width: 560px; }
.cs-preset {
	width: 28px; height: 28px; padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
	border: 2px solid #fff !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .08) !important;
	cursor: pointer; transition: transform .15s;
}
.cs-preset:hover { transform: scale(1.12); }
.cs-preset[aria-pressed="true"] { box-shadow: 0 0 0 2px #111, 0 2px 6px rgba(0, 0, 0, .1) !important; }
.cs-random {
	display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px !important; margin: 0 0 0 4px !important;
	border: 1px solid rgba(0, 0, 0, .08) !important; border-radius: 999px !important; background: rgba(255, 255, 255, .9) !important;
	color: #222 !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; box-shadow: none !important;
}
.cs-random .tg-i { width: 14px; height: 14px; }
.cs-random:hover { background: #fff !important; }

/* Results */
.cs-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.cs-head h2 { display: flex; align-items: center; gap: 10px; }
.cs-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.cs-head code { font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; font-size: .85em; background: none; padding: 0; color: #111; }
.cs-image-link { font-size: 14px; font-weight: 600; color: #55555F !important; text-decoration: none !important; }
.cs-image-link:hover { color: #111 !important; }

#cs-grid { transition: opacity .15s; }
#cs-grid.cs-loading { opacity: .45; }

.gc-match {
	display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px;
	padding: 3px 9px 3px 4px; border-radius: 999px; background: #F4F4F7;
	font-size: 11px; font-weight: 600; color: #45454F;
}
.gc-match i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }

.cs-more-wrap { display: flex; justify-content: center; margin: -8px 0 48px; }
.cs-more {
	padding: 11px 26px !important; border: 1px solid #E2E2E8 !important; border-radius: 999px !important;
	background: #fff !important; color: #222 !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; box-shadow: none !important;
}
.cs-more:hover { border-color: #111 !important; }
.cs-more[hidden] { display: none; }
.cs-more:disabled { opacity: .5; }

@media (max-width: 560px) {
	.cs-go { padding: 0 14px !important; font-size: 13px !important; }
	.cs-picker #cs-hex { font-size: 15px !important; }
}
.cs-head h2 { font-size: 20px !important; }