/*
 * PureCSS.com
 * https://purecss.com/examples/color-swatch/
 * Radio buttons styled as color circles with a :checked ring indicator.
 */

.demo-color-swatch .swatch-section {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		max-width: 340px;
		margin: 0 auto;
	}

.demo-color-swatch .swatch-label {
		font-size: .82rem;
		color: var(--text-muted);
		font-weight: 500;
		margin-bottom: .4rem;
	}

.demo-color-swatch .swatch-group {
		display: flex;
		gap: .6rem;
		flex-wrap: wrap;
	}

:is(.demo-color-swatch .swatch-group) input[type="radio"] {
			display: none;
		}

:is(.demo-color-swatch .swatch-group) label {
			display: block;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			cursor: pointer;
			border: 3px solid transparent;
			outline: 2px solid transparent;
			outline-offset: 2px;
			transition: outline-color .15s, transform .15s;
		}

:is(:is(.demo-color-swatch .swatch-group) label):hover {
				transform: scale(1.1);
			}

:is(.demo-color-swatch .swatch-group) input[type="radio"]:checked + label {
			outline-color: var(--text);
		}

--large:is(.demo-color-swatch .swatch-group) label {
			width: 42px;
			height: 42px;
		}

.demo-color-swatch .selected-label {
		font-size: .85rem;
		color: var(--text-muted);
		margin-top: .5rem;
	}