.colors-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
}

	.colors-row__color {
		mask: url("/img/functional/r.svg") no-repeat;
		box-shadow: var(--shadow) inset;
		border-radius: 50%;
		margin-left: 0; 
		display: flex;
		font-weight: 500;
		padding: 1.2em;
		cursor: help;
	}

	.colors-row__name {
		filter: invert() grayscale(1) contrast(2) brightness(99);
		font-weight: 500;
	}

	.colors-row__expand {
		padding: 0.5rem;
		margin-left: 0.5rem;
		border-radius: 0.5rem;
		box-shadow: var(--shadow);
		background-color: var(--light);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.7rem;
		font-weight: 400;
		color: var(--dark);
		cursor: pointer;
	}
		.colors-row__expand:hover {
			text-decoration: underline;
		}
		.colors-row__expand:hover .colors-row__expand-icon {
			transform: translateX(3px);
			padding-right: 4px;
		}

		.colors-row__expand-icon {
			margin-left: 0.3rem;
			font-size: 0.65rem;
			transition: transform 0.16s ease;
		}

@media screen and (max-width: 1100px) {
	.colors-row--single-color {
		justify-content: center;
	}
}