- @row1 = ['esc','F1','F2','F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'eject']

- @row2 = ['~','1','2','3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'delete']

- @row3 = ['tab','Q','W','E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '{', '}', '|']

- @row4 = ['caps lock','A','S','D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '"', ''', 'return']

- @row5 = ['shift','Z','X','C', 'V', 'B', 'N', 'M', '<', '>', '?', 'shift']

- @row6 = ['fn','control','option','command', '&nbsp;', 'command', 'option', ' ', ' ', ' ']
      
.keyboard
  %div.row.row-1
    - @row1.each_with_index do |character, index|
      %div.key.narrow{:class => index}= character
  %div.row.row-2
    - @row2.each_with_index do |character, index|
      %div.key{:class => index}= character 
  %div.row.row-3
    - @row3.each_with_index do |character, index|
      %div.key{:class => index}= character 
  %div.row.row-4
    - @row4.each_with_index do |character, index|
      %div.key{:class => index}= character 
  %div.row.row-5
    - @row5.each_with_index do |character, index|
      %div.key{:class => index}= character   
  %div.row.row-6
    - @row6.each_with_index do |character, index|
      %div.key{:class => index}= character  

$keyboard-text: #888;
$keyboard-bg: #ddd;
$key-bg: #eff0f2;


*{
  box-sizing: border-box;
}

body{
  font-size: 12px;
  font-family: monospace;
  text-align: center;
}
.keyboard{
  display: inline-block;
  padding: 4em 1em 1em;
  background-color: $keyboard-bg;
  background-image: -webkit-gradient(
    linear,left bottom,left top,
    color-stop(0.27, rgb(212,216,219)),
    color-stop(0.64, rgb(213,217,220)),
    color-stop(0.95, rgb(230,233,235)),
    color-stop(1, rgb(191,191,191))
  );
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 5px 0px rgba(100,100,100,0.5);
  -moz-box-shadow: 4px 4px 5px 0px rgba(100,100,100,0.5);
  box-shadow: 4px 4px 5px 0px rgba(100,100,100,0.5);
  .row{
    display: flex;
    justify-content:space-between;
    align-content: space-between;
    margin: 0.7em auto;
  }
}

.key{
  margin: 0 ;
  padding: 1em 2em;
  background-color: $key-bg;
  color: $keyboard-text;
  border-radius: 6px;
  cursor: pointer;
  -webkit-box-shadow: 
    inset 1px 0 25px #dfdfdf,
    0 1px 0 #cfcfcf,
    0 1px 0 #bfbfbf,
    0 1px 1px #6f6f6f;
      
    &.narrow{
      padding: 0.6em 2em;
    }
    &:active{
      box-shadow: inset 0 0 50px #ddd, 0 0 2px #888;
    }
}

.row{
  &-3, &-4, &-5{
    .key:first-child{
      font-size: .9em;
      padding: 1.5em 3em 0.5em .8em;
      text-align: left;
    }
  }
  &-2, &-4, &-5{
    .key:last-child{
      font-size: .9em;
      padding: 1.5em .8em 0.5em  3em;
      text-align: right;
    }
  }
  &-1{
    font-size: .9em;
  }
  &-5{
    .key:first-child{
      padding-right:4.5em;
    }
    .key:last-child{
      padding-left:4.5em;
    }
  }
  &-6{
    font-size: .9em;
    .key{
      padding: 2em 1.5em 0.8em;
    }
    .key:nth-child(5){
      padding-left:10em;
      padding-right:10em;
    }
    // Arrows
    .key:nth-child(8), .key:nth-child(9),.key:nth-child(10){
      padding: 1em 2em 0.8em;
      position: relative;
      margin-bottom: 0; 
    }
    // left arrow  
    .key:nth-child(8){
      &:after{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: '';
        width: 0; 
        height: 0; 
        border-top: 4px solid  transparent;
        border-bottom: 4px solid transparent; 
        border-right: 6px solid $keyboard-text; 
      }
    }
    // bottom arrow
    .key:nth-child(9){
      position: relative;
      padding-top: 3em;
      //top arrow
      &:before{
        position: absolute;
        top: 0.5em;
        left: 50%;
        transform: translateX(-50%);
        content: '';
        width: 0; 
        height: 0; 
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 6px solid $keyboard-text;
      }
      &:after{
        position: absolute;
        bottom: 0.5em;
        left: 50%;
        transform: translateX(-50%);
        content: '';
        width: 0; 
        height: 0; 
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid $keyboard-text;
      }
    }
    // right arrow  
    .key:nth-child(10){
      &:after{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: '';
        width: 0; 
        height: 0; 
        border-top: 4px solid  transparent;
        border-bottom: 4px solid transparent; 
        border-left: 6px solid $keyboard-text; 
      }
    }
  }
}