$major = rgba(green, 0.15)
$minor = rgba(black, 0.05)
$size = 1u
$double = $size * 2
$bar = 2u
$barMargin = 1u
$valid = rgba(black, 0.2)
$validLine = rgba(black, 0.1)
$invalid = red
$bg = #f5f5f5

$darkBg = #333333
$darkValid = rgba(white, 0.3)
$darkInvalid = lighten(red, 40%)
$darkValidLine = rgba(white, 0.2)

grid(direction, color, size)
  return linear-gradient(direction, color 0px, color 1px, transparent 1px, transparent size)

.gridVisualizer
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  +web()
    pointer-events none
    background-image grid(to right, $major, $double), grid(to bottom, $major, $double), grid(to right, $minor, $double), grid(to bottom, $minor, $double)
    background-size $double $double, $double $double, $double $double, $double $double
    background-position 0 0, 0 0, $size $size, $size $size
    background-repeat repeat, repeat, repeat, repeat

.filler
  height $bar + $barMargin
  width $bar

.content
  margin-left 2u

  &.block
    flex-grow 1

.leftBar
  align-items center
  justify-content center

  &Wrapper
    align-items center
    transform rotate(-90deg)
    position absolute

  &Text
    font-size 10px
    color $invalid
    background-color $bg
    margin 0 .5u

    &.valid
      color $valid
    &.dark
      background-color $darkBg
      color $darkInvalid
      &.valid
        color $darkValid

  &Line
    flex 1
    height 0.5u
    background-color $invalid
    &.valid
      height 1px
      background-color $validLine
    &.dark
      background-color $darkInvalid
      &.valid
        background-color $darkValidLine

.topBar
  flex-direction row
  height $bar
  margin-bottom $barMargin
  align-items center

  &Units
    z-index 1

  &Text
    font-size 10px
    color $invalid
    background-color $bg
    &.valid
      color $valid
    &.dark
      background-color $darkBg
      color $darkInvalid
      &.valid
        color $darkValid

  &Line
    flex 1
    height 0.5u
    background-color $invalid
    &.valid
      height 1px
      background-color $validLine
    &.dark
      background-color $darkInvalid
      &.valid
        background-color $darkValidLine