/* Hide "color" 4 items or more */
.palette li:first-child:nth-last-child(n+4) .color-options a:after,
.palette li:first-child:nth-last-child(n+4) ~ li .color-options a:after {
content: none;
}

/* Hide word when 6 items or more */
.palette li:first-child:nth-last-child(n+6) .color-options a,
.palette li:first-child:nth-last-child(n+6) ~ li .color-options a {
color: transparent;
font-size: 0;
}

.palette li:only-child .delete {
display:none;
}

/* From this point it’s just styling */
.palette {
display: flex;
height: 200px;
max-width:900px;
font: bold 90%/1 sans-serif;
}

.palette li {
flex: 1;
list-style: none;
background: #D6E055;
}

.color-options {
background: rgba(0,0,0,.5);
padding: 10px;
margin: 0 10px;
overflow:hidden;
border-radius:0 0 10px 10px;
}

.color-options .add { float:left; }
.color-options .delete { float:right; }

.color-options a {
color: white;
text-decoration:none;
}

.color-options a:before {
display:inline-block;
font-size: 1rem;
width:1.3rem;
margin-right:.3rem;
text-align: center;
line-height: 1.3;
background:white;
border-radius: 50%;
letter-spacing: normal;
}

.color-options .add:before {
content:'✚';
color:#590;
}

.color-options .delete:before {
content:'✖';
color:#b00;
}

.color-options a:after {
content: ' color';
font-weight: normal;
}