# attr_box.ludic - padding and margin (one to four lengths, as CSS writes them, or one side by
# name), lengths with px or %, and the words that place things
function el_box(ui_st: mut UiState, n: UiNode, key: string, v: Val) -> bool {
  if key == "pad" {
    el_sides(ui_st, v)
    n.pt = ui_st.el_s0
    n.pr = ui_st.el_s1
    n.pb = ui_st.el_s2
    n.pl = ui_st.el_s3
  } else if key == "margin" {
    el_sides(ui_st, v)
    n.mt = ui_st.el_s0
    n.mr = ui_st.el_s1
    n.mb = ui_st.el_s2
    n.ml = ui_st.el_s3
  } else if key == "padding-top" { n.pt = el_len(ui_st, v) } else if key == "padding-right" { n.pr = el_len(ui_st, v) } else if key == "padding-bottom" { n.pb = el_len(ui_st, v) } else if key == "padding-left" { n.pl = el_len(ui_st, v) } else if key == "margin-top" { n.mt = el_len(ui_st, v) } else if key == "margin-right" { n.mr = el_len(ui_st, v) } else if key == "margin-bottom" { n.mb = el_len(ui_st, v) } else if key == "margin-left" { n.ml = el_len(ui_st, v) } else { return false }
  return true
}
# top right bottom left out of 1 to 4 lengths
function el_sides(ui_st: mut UiState, v: Val) -> void {
  var n = 0
  if vl_num(v) {
    ui_st.el_s0 = el_px(ui_st, Value.as_float(v))
    n = 1
  } else {
    let words = mm_words(ui_st, vl_text_u(ui_st, v))
    for i in 0 .. len(words) {
      if len(words[i]) > 0 and n < 4 {
        el_side_set(ui_st, n, el_word_len(ui_st, words[i]))
        n += 1
      }
    }
  }
  if n == 0 { ui_st.el_s0 = 0.0 }
  if n < 2 { ui_st.el_s1 = ui_st.el_s0 }
  if n < 3 { ui_st.el_s2 = ui_st.el_s0 }
  if n < 4 { ui_st.el_s3 = ui_st.el_s1 }
}
# CSS's one to four sides, top right bottom left, without a list made for them
function el_side_set(ui_st: mut UiState, i: int, v: float) -> void {
  if i == 0 { ui_st.el_s0 = v } else if i == 1 { ui_st.el_s1 = v } else if i == 2 { ui_st.el_s2 = v } else { ui_st.el_s3 = v }
}
# a length: a number, 10px, 1.5em, 2rem, 50vw, calc(...), fill, fit or auto (a percentage is el_pct's)
function el_len(ui_st: mut UiState, v: Val) -> float {
  if vl_num(v) { return el_px(ui_st, Value.as_float(v)) }
  let s = vl_text_u(ui_st, v)
  if s == "fill" { return UI_FILL }
  if ca_is(s) { return el_calc_len(ui_st, s) }
  if s == "fit" or s == "auto" or (len(s) > 0 and s[len(s) - 1] == 37) { return 0.0 }
  return el_unit(ui_st, s)
}
function el_pct(v: Val) -> float {
  let s = vl_text(v)
  if len(s) > 1 and s[len(s) - 1] == 37 { return el_num(s) }
  return 0.0
}
# the number at the front of `12.5px`
function el_num(s: string) -> float { return el_num_in(s, 0, len(s)) }
# the number in s from..to, read where it stands
function el_num_in(s: string, from: int, to: int) -> float {
  var f = 0.0
  var unit = 0.0
  var neg = false
  for i in from .. to {
    let c = s[i]
    if c == 45 and i == from { neg = true } else if c == 46 { unit = 0.1 } else if c >= 48 and c <= 57 {
      if unit > 0.0 {
        f = f + float(c - 48) * unit
        unit = unit * 0.1
      } else { f = f * 10.0 + float(c - 48) }
    } else { break }
  }
  if neg { return 0.0 - f }
  return f
}
# start, center, end, stretch; for justify also between, around, evenly - with CSS's spellings
function el_place(v: Val) -> int {
  var s = vl_text(v)
  if len(s) > 6 and sat(s, 0, "space-") { s = s[6..len(s)] }
  if len(s) > 5 and sat(s, 0, "flex-") { s = s[5..len(s)] }
  if s == "center" { return UI_CENTER }
  if s == "end" or s == "right" { return UI_END }
  if s == "stretch" or s == "between" { return 3 }
  if s == "around" { return UI_AROUND }
  if s == "evenly" { return UI_EVENLY }
  return UI_START
}