# ruby whitespace.rb | pbcopy

%w(sm md lg).each do |breakpoint|
  puts "@media (--breakpoint-#{breakpoint}) {"

  {
    0 => ['0', '0'],
    1 => ['var(--space-1)', 'calc(0 - var(--space-1))'],
    2 => ['var(--space-2)', 'calc(0 - var(--space-2))'],
    3 => ['var(--space-3)', 'calc(0 - var(--space-3))'],
    4 => ['var(--space-4)', 'calc(0 - var(--space-4))']
  }.each do |i, value|
    puts <<-CSS
  .#{breakpoint}-m#{i}   { margin: #{value.first} }
  .#{breakpoint}-mt#{i}  { margin-top: #{value.first} }
  .#{breakpoint}-mr#{i}  { margin-right: #{value.first} }
  .#{breakpoint}-mb#{i}  { margin-bottom: #{value.first} }
  .#{breakpoint}-ml#{i}  { margin-left: #{value.first} }

  .#{breakpoint}-mxn#{i} { margin-right: #{value.last}; margin-left: #{value.last} }

  .#{breakpoint}-p#{i}   { padding: #{value.first} }
  .#{breakpoint}-px#{i}  { padding-left: #{value.first}; padding-right: #{value.first} }
  .#{breakpoint}-py#{i}  { padding-top: #{value.first}; padding-bottom: #{value.first} }
CSS
  end

  puts "}"
  puts
end