/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Ant Colony Optimization - Swarm Intelligence Simulation  - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Color Variables                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root {
  --aco-color-colony: #ffaa00;
  --aco-color-food: #44ff44;
  --aco-color-pheromone-food: #00ff88;
  --aco-color-pheromone-home: #4488ff; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Layout                                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#aco-canvas {
  width: 100%;
  height: 100%;
  background: var(--background-color-surface); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Controls Widget                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.aco-controls {
  display: flex;
  gap: 0.5rem; }
  .aco-controls .button {
    flex: 1; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Options Widget                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.aco-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }
  .aco-options label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--text-color-surface); }
    .aco-options label span {
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--text-color-primary); }
  .aco-options input[type="range"] {
    width: 100%;
    height: 4px;
    margin-top: 0.25rem;
    appearance: none;
    background: var(--draw-color-surface);
    border-radius: 2px;
    cursor: pointer; }
    .aco-options input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      background: var(--draw-color-primary);
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 150ms ease; }
      .aco-options input[type="range"]::-webkit-slider-thumb:hover {
        background: var(--text-color-primary); }
    .aco-options input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      background: var(--draw-color-primary);
      border: none;
      border-radius: 50%;
      cursor: pointer; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Responsive Breakpoints                                   - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (max-width: 767px) {
  layout-main main {
    padding: 1rem;
    gap: 1rem; }
  .aco-options label {
    font-size: 0.8rem; } }