/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Cellular Automata - Interactive Simulation               - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Breakpoint Variable                                      - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Layout                                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#automata-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  background: var(--background-color-surface); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Control Buttons                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.automata-controls {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem; }
  .automata-controls .button {
    flex: 1;
    min-width: 60px; }
  .automata-controls .is-start {
    display: block; }
  .automata-controls .is-pause {
    display: none; }
  .automata-controls.is-running .is-start {
    display: none; }
  .automata-controls.is-running .is-pause {
    display: block; }
  @media (max-width: 768px) {
    .automata-controls .button {
      flex: 1 1 45%; } }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Preset Selector                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.automata-presets select {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-color-surface);
  background: var(--background-color-surface);
  border: 1px solid var(--draw-color-surface);
  border-radius: 4px;
  cursor: pointer; }
  .automata-presets select:focus {
    outline: none;
    border-color: var(--draw-color-primary); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Options Widget                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.automata-options {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem; }
  .automata-options label {
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--text-color-surface); }
  .automata-options select {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color-surface);
    background: var(--background-color-surface);
    border: 1px solid var(--draw-color-surface);
    border-radius: 4px;
    cursor: pointer; }
    .automata-options select:focus {
      outline: none;
      border-color: var(--draw-color-primary); }
  .automata-options input[type="range"] {
    width: 100%;
    height: 6px;
    margin: 0.25rem 0;
    appearance: none;
    background: var(--draw-color-surface);
    border-radius: 3px;
    cursor: pointer; }
    .automata-options input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 16px;
      height: 16px;
      background: var(--draw-color-primary);
      border-radius: 50%;
      cursor: pointer; }
    .automata-options input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: var(--draw-color-primary);
      border: none;
      border-radius: 50%;
      cursor: pointer; }
  .automata-options #speed-value {
    font-weight: 600;
    color: var(--draw-color-primary); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Statistics                                               - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.5rem;
  margin: 0; }
  dl dt {
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--text-color-surface); }
  dl dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-color-primary); }