@bigfishtv/cockpit/styles/components/color-card.less

.color-card {
	margin-top: (@gutter-small * 2);
	
	&:first-of-type {
		margin-top: 0;
	}

	input[type="text"] + input[type="text"] {
		margin-left: 0;
	}
}

.mini-palette {
	margin-top: @gutter-small;
	margin-left: @gutter-small;
}

.color-size(@size) {
	.square(@size);
	.color-picker-wrapper {
		margin-top: @size;
	}
}

.color {
	position: relative;
	display: inline-block;
	flex: inherit;
	margin-right: 0.2rem;
	.color-size(2.4rem);
	border: 1px solid @light-grey;
	transition: border-color @transition-fast ease-in-out;

	&:hover,
	&:focus {
		border-color: @dark;
	}

	&.selected {
		border-color: @white;
		outline: 1px solid @primary;
	}

	&.xlarge {
		.color-size(3.2rem);
	}

	&.large {
		.color-size(2.8rem);
	}

	&.medium {
		.color-size(2.4rem);
	}

	&.small {
		.color-size(2.0rem);
	}

	&.xsmall {
		.color-size(1.6rem);
	}
}