/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - 3D Cellular Automata                                     - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Breakpoint Variable                                      - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Canvas                                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#cellular-canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
  border-radius: 4px; }
  #cellular-canvas:active {
    cursor: grabbing; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Controls Widget                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.cellular3d-controls {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem; }
  .cellular3d-controls .control-group {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.25rem; }
    .cellular3d-controls .control-group 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; }
      .cellular3d-controls .control-group select:hover {
        border-color: var(--draw-color-primary); }
      .cellular3d-controls .control-group select:focus {
        outline: none;
        border-color: var(--draw-color-primary); }
  .cellular3d-controls .is-start {
    display: block; }
  .cellular3d-controls .is-pause {
    display: none; }
  .cellular3d-controls.is-running .is-start {
    display: none; }
  .cellular3d-controls.is-running .is-pause {
    display: block; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Action Buttons                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.cellular3d-actions {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem; }
  .cellular3d-actions .button {
    flex: 1;
    min-width: 60px; }
  @media (max-width: 768px) {
    .cellular3d-actions .button {
      flex: 1 1 45%; } }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Options Widget                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.cellular3d-options {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem; }
  .cellular3d-options label {
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--text-color-surface); }
  .cellular3d-options input[type="range"] {
    width: 100%;
    height: 6px;
    margin: 0.25rem 0;
    appearance: none;
    background: var(--draw-color-surface);
    border-radius: 3px;
    cursor: pointer; }
    .cellular3d-options input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 16px;
      height: 16px;
      background: var(--draw-color-primary);
      border-radius: 50%;
      cursor: pointer; }
    .cellular3d-options input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: var(--draw-color-primary);
      border: none;
      border-radius: 50%;
      cursor: pointer; }
  .cellular3d-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); }