/*contains styles that are always present.*/
:root {
  --sudoku-accent-blue: oklch(0.92 0.25 270);
  --sudoku-accent-teal: oklch(0.92 0.25 205);
  --sudoku-accent-green: oklch(0.92 0.25 145);
  --sudoku-accent-yellow: oklch(0.92 0.25 100);
  --sudoku-accent-orange: oklch(0.92 0.25 60);
  --sudoku-accent-red: oklch(0.92 0.25 20);
  --sudoku-accent-pink: oklch(0.92 0.25 5);
  --sudoku-accent-purple: oklch(0.92 0.25 300);
  --sudoku-accent-slate: oklch(0.92 0.05 250);
  --sudoku-pause-delay: 2s;
}
grid.board {
  border: 2px solid #333;
  background: #333;
}
grid.block {
  background: #999;
}
sudoku-cell {
  background: var(--view-bg-color);
}
sudoku-cell.fixed {
  background: #CCC;
}
sudoku-cell.highlight-coord {
  background: oklch(from var(--sudoku-accent-color) 0.9 calc(c * 0.25) h);
}
sudoku-cell.highlight-number {
  background: oklch(from var(--sudoku-accent-color) 0.85 c h);
}
sudoku-cell .earmark.highlight-number {
  color: oklab(from var(--sudoku-accent-color) 0.5 a b);
  font-weight: bold;
}
sudoku-cell .error {
  color: var(--error-color);
}
sudoku-cell .error.earmark {
  text-decoration: line-through;
}
sudoku-cell .error.value {
  font-weight: bold;
}
@keyframes slow-appear {
  from {opacity: 0;}
  to {opacity: 1;}
}
sudoku-cell.selected {
  background: var(--sudoku-accent-color);
}
overlay.paused > label {
  font-weight: bold;
  color: #FFF;
  background: rgba(0, 0, 0, 0.75);
  transition: background var(--sudoku-pause-delay);
  animation: slow-appear var(--sudoku-pause-delay) forwards;
}
sudoku-cell.paused label {
  opacity: 0;
  transition: opacity var(--sudoku-pause-delay);
}
sudoku-cell.paused {
  background: var(--view-bg-color);
  transition: background var(--sudoku-pause-delay);
}
sudoku-picker {
  margin: 2px;
}
sudoku-picker .earmark {
  margin-right: 16px;
  margin-bottom: 8px;
}
sudoku-picker .value {
  margin-right: 8px;
  margin-left: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}
sudoku-picker .text-button {
  /*Overrides the default text-button padding*/
  padding-left: 10px;
  padding-right: 10px;

  font-size: larger;
}
