/* @group @variables */

[class*="a-color-icon-red"] {
--color-icon-background-color: hsla(360, 100%, 50%, 1);
}

[class*="a-color-icon-yellow"] {
--color-icon-background-color: hsla(60, 100%, 50%, 1);
}

[class*="a-color-icon-purple"] {
--color-icon-background-color: hsla(300, 100%, 25%, 1);
}

[class*="a-color-icon-brown"] {
--color-icon-background-color: hsla(359, 60%, 40%, 1);
}

[class*="a-color-icon-pink"] {
--color-icon-background-color: hsla(350, 98%, 88%, 1);
}

[class*="a-color-icon-green"] {
--color-icon-background-color: hsla(121, 100%, 25%, 1);
}

[class*="a-color-icon-beige"] {
--color-icon-background-color: hsla(60, 56%, 91%, 1);
}

[class*="a-color-icon-orange"] {
--color-icon-background-color: hsla(39, 100%, 50%, 1);
}

[class*="a-color-icon-white"] {
--color-icon-background-color: var(--color-white);
}

[class*="a-color-icon-black"] {
--color-icon-background-color: var(--color-black);
}

[class*="a-color-icon-blue"] {
--color-icon-background-color: hsla(240, 100%, 50%, 1);
}

[class*="a-color-icon-gray"] {
--color-icon-background-color: hsla(0, 0%, 50%, 1);
}

[class*="a-color-icon-navy"] {
--color-icon-background-color: hsla(240, 100%, 25%, 1);
}

/* @end @variables */

/* @group @a-color-thumbnail */

[class*="a-color-icon"] {
display: grid;
gap: .375rem;
width: .75rem;
height: .75rem;
background-color: var(--color-icon-background-color);
border: 1px solid var(--color-gainsboro);
}

/* @end @a-color-icon */