/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Particle Swarm Optimization                             - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#pso-canvas {
  width: 100%;
  height: 100%;
  background: var(--background-color-surface); }

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

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Options Widget                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.pso-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }
  .pso-options .option-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; }
    .pso-options .option-group label {
      font-size: 0.8rem;
      color: var(--text-color-surface);
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .pso-options .option-group label span {
        font-family: var(--font-monospace);
        color: var(--draw-color-primary); }
    .pso-options .option-group select,
    .pso-options .option-group input[type="range"] {
      width: 100%;
      padding: 0.25rem;
      font-size: 0.875rem;
      border: 1px solid var(--draw-color-surface);
      border-radius: 4px;
      background: var(--background-color-surface);
      color: var(--text-color-surface); }
    .pso-options .option-group input[type="range"] {
      padding: 0;
      cursor: pointer; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Stats Widget                                            - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.pso-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem; }
  @media (max-width: 575px) {
    .pso-stats {
      grid-template-columns: 1fr; } }
  .pso-stats .stat {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--background-color-surface);
    border: 1px solid var(--draw-color-surface);
    border-radius: 4px; }
    .pso-stats .stat .label {
      font-size: 0.7rem;
      color: var(--text-color-surface);
      text-transform: uppercase;
      letter-spacing: 0.05em; }
    .pso-stats .stat .value {
      font-size: 1rem;
      font-weight: 600;
      font-family: var(--font-monospace);
      color: var(--draw-color-primary); }
    .pso-stats .stat.full-width {
      grid-column: 1 / -1; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - History Widget                                          - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.history-container #history-canvas {
  width: 100%;
  height: 100%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Function info                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.function-info {
  font-size: 0.8rem;
  color: var(--text-color-surface);
  padding: 0.5rem;
  background: var(--background-color-surface);
  border: 1px solid var(--draw-color-surface);
  border-radius: 4px; }
  .function-info code {
    font-family: var(--font-monospace);
    color: var(--draw-color-primary); }
  .function-info .minimum {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.8; }