__sensible.css

/* pico-sensible */
/* @todo add description of what this will achieve */
:root {
  --form-spacing: calc(var(--spacing) / 2);
  --form-input-max-length: 15;
  --form-font-scale: 0.5;
}

/* max-width */
form.__sensible input:not([type=checkbox],
form.__sensible [type=radio]), 
form.__sensible select, 
form.__sensible textarea {
  max-width: calc(var(--font-size) * var(--form-input-max-length));
}

/* spacing between elements */
form.__sensible > * {
  font-size: var(--font-size);
  margin-left: var(--form-spacing);
  margin-right: var(--form-spacing);
}
form.__sensible {
  margin-left: calc(var(--form-spacing) * -1);
  margin-right: calc(var(--form-spacing) * -1);
}


@media (min-width: 576px) {
  form.__sensible {
    --font-size: 17px;
  }
}
@media (min-width: 768px) {
  form.__sensible {
    --font-size: 17px;
  }
}
@media (min-width: 992px) {
  form.__sensible {
    --font-size: 18px;
  }
}
@media (min-width: 1200px) {
  form.__sensible {
    --font-size: 18px;
  }
}