.variables
  .field
    label(for="columns") Columns
    input(id="columns" type="number" value="9" min="2" max="15")
  .field
    label(for="right") Flip Vertical
    input(id="right" type="number" value="4" min="0" max="20")
  .field
    label(for="bottom") Flip Horizontal
    input(id="bottom" type="number" value="3" min="0" max="20")

.grid
  - i = 225
  while i--
    .grid__item

@for $i from 1 through 15
  .grid[data-columns="#{$i}"]
    // set the columns
    grid-template-columns: repeat($i, 1fr)
    // hide any extra items
    > *:nth-child(#{$i*$i}) ~ *
      display: none

@for $i from 1 through 20
  .grid[data-right="#{$i}"]
    .grid__item:nth-child(#{$i}n):before
      right: 0
  .grid[data-bottom="#{$i}"]
    .grid__item:nth-child(#{$i}n):before
      bottom: 0

.grid
  display: grid
  grid-template-columns: repeat(15, 1fr)
  width: 90vmin
  height: 90vmin
  grid-gap: 0
  overflow: hidden

.grid__item
  background: black
  position: relative
  overflow: hidden
  &:before
    content: ''
    display: block
    position: absolute
    width: 200%
    height: 200%
    border-radius: 50% 50%
    background: white

////////

@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap')

body
  margin: 0
  height: 100vh
  display: flex
  align-items: center
  justify-content: center
  
body, input
  font-family: Inconsolata, monospace

.variables
  position: absolute
  z-index: 1
  top: 0
  left: 0
  background: rgba(#f5f5f5, 0.9)
  padding: 1rem 1rem 0.5rem
  
  transition: opacity 0.15s linear
  opacity: 0.3
  &:hover
    opacity: 1

.field
  display: flex
  margin: 0 0 0.5rem

  label
    flex: 1
    font-weight: bold

  input
    width: 3rem
    margin-left: 1rem
    padding-left: 0.75rem
    background: transparent
    border: 1px solid white
    text-align: center
    outline: none
    
    &:focus
      background: rgba(#fff, 0.5)

// I wish input[data-value="a changing thing"] ~ .somethingToChange worked

const grid = document.getElementsByClassName('grid')[0]
const inputs = Array.from(document.getElementsByTagName('input'))

const setVariable = (input) => {
  grid.setAttribute(`data-${input.id}`, input.value)
}

inputs.forEach(input => {
  input.addEventListener('change', () => setVariable(input))
  setVariable(input)
})