#queens-board {
--queens-tile: var(--grey-400);
--queens-error: var(--red-700);
span {
background-color: var(--queens-tile);
padding: var(--spacing-1);
border: 1px solid var(--secondary-fg);
}
span.queen {
background: var(--queens-tile) url('data:image/svg+xml,') 50% 50% no-repeat;
}
span.dot {
background: var(--queens-tile) url('data:image/svg+xml,') 50% 50% no-repeat;
}
span.error {
border: 1px solid white;
background: var(--queens-error) url('data:image/svg+xml,') 50% 50% no-repeat !important;
}
/* colour background for tiles*/
span.red {
background-color: var(--red-400);
}
span.orange {
background-color: var(--orange-500);
}
span.amber {
background-color: var(--amber-400);
}
span.pink {
background-color: var(--pink-500);
}
span.lime {
background-color: var(--lime-300);
}
span.emerald {
background-color: var(--emerald-500);
}
span.cyan {
background-color: var(--cyan-400);
}
span.blue {
background-color: var(--blue-500);
}
span.indigo {
background-color: var(--indigo-400);
}
span.purple {
background-color: var(--purple-500);
}
}