@bigfishtv/cockpit/styles/components/swatch.less

.swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.swatch {
	display: inline-block;
	cursor: pointer;
	border-radius: @border-radius;
	box-shadow: 0px 0px 0px 1px @light-grey;

	&.selected {
		box-shadow: 0px 0px 0px 1px @primary;
	}

	&.transparent {
		&::before {
			display: block;
			content: ' ';
			border-top: 1px solid red;
		}
	}
}

.swatch-size(@size) {
	.square(@size);

	&.transparent {
		&::before {
			transform: translateY(@size / 2) rotate(-45deg);
		}
	}
}

.swatch-small {
	.swatch-size(2rem);
}

.swatch-medium {
	.swatch-size(3.5rem);
}

.swatch-large {
	.swatch-size(4.2rem);
}

.swatch-xlarge {
	.swatch-size(6.4rem);
}