/*! Garmoshka | https://github.com/artpolikarpov/garmoshka */
@import compass

body
  margin: 0
  background: #000

$margin: 0
$melodyWidth: 200px
$melodyPanelWidth: 50px
$melodyButtonsWidth: $melodyWidth - $melodyPanelWidth
$melodyButtonSize: 30px
$melodyButtonStickHeight: 2px
$bellowsSliceSize: 20
$bellowsSliceBorderWidth: 6px
$bellowsSliceHalfWidth: 30px
$chordsWidth: 200px
$chordsPanelWidth: 50px
$chordsButtonsWidth: $chordsWidth - $chordsPanelWidth
$chordsButtonSize: 22px


.garmoshka
  max-width: $bellowsSliceHalfWidth * 2 * $bellowsSliceSize + $chordsWidth + $melodyWidth
  min-width: ($bellowsSliceBorderWidth + 2) * $bellowsSliceSize + $chordsWidth + $melodyWidth
  min-height: $melodyButtonSize * 1.3 * 10 + 200
  position: absolute
  top: $margin
  right: $margin
  bottom: $margin
  left: $margin

  .button
    +border-radius(30px)
    +box-shadow(0 0 2px 2px #fff inset, -1px 0 4px 2px rgba(0, 0, 0, .75))
    +background(linear-gradient(#d0d0d0, #fdfdfd))
    width: $melodyButtonSize
    height: $melodyButtonSize
    top: 0
    left: 0
    &:active, &.active
      +background(linear-gradient(darken(#d0d0d0,15%), darken(#fdfdfd,15%)))
      +box-shadow(0 0 2px 2px darken(#fff,15%) inset, -1px 0 4px 2px rgba(0, 0, 0, .75))


  .melody
    position: absolute
    top: 0
    bottom: 0
    left: 0
    width: $melodyWidth
    +background(linear-gradient(#232221, #333333 75%, #1e1d1f))

    .panel
      position: absolute
      top: 0
      bottom: 0
      left: $melodyButtonsWidth
      width: $melodyPanelWidth
      z-index: 10
      +box-shadow(0 0 25px rgba(0,0,0,.75))
      .sign
        font-size: 32px
        position: absolute
        top: 50%
        margin-top: -.5em
        margin-left: 10px
        +transform(translate(10px, -50%))
        +rotate(-90deg)
        text-shadow: 0 1px 0 rgba(255, 255, 255, .25)
    .buttons
      position: absolute
      overflow: hidden
      top: 0
      bottom: 0
      left: 0
      width: $melodyButtonsWidth
      background: rgba(0,0,0,.25)
      +box-shadow(-30px 0 10px -10px rgba(0,0,0,1) inset)
      button
        background: none
        border: none
        margin: 0
        padding: 0
        display: block
        position: absolute
        width: $melodyButtonSize
        height: $melodyButtonSize
        +transform-origin(100%, 0%)
        outline: none
        @for $i from 1 through 13
          &:nth-child(#{$i})
            top: $melodyButtonSize * 1.3 * ($i - 1)
        &:after
          content: ''
          position: absolute
          @extend .button
        &:before
          content: ''
          width: $melodyWidth
          height: $melodyButtonStickHeight
          top: $melodyButtonSize / 2 - $melodyButtonStickHeight / 2
          left: 0
          position: absolute
          background: #fff
          +box-shadow(1px 2px 0 #000)
        &:active, &.active
          &:after
            margin-left: 1px
          &:before
            +box-shadow(1px 0 0 #000)
            background: darken(#fff,15%)
      .line-1, .line-2
        top: 50%
        margin-top: -($melodyButtonSize * 1.3 * 13 / 2)
        position: absolute
      .line-1
        button
          left: $melodyButtonSize
      .line-2
        button
          left: $melodyButtonSize*2 + $melodyButtonSize
          margin-top: $melodyButtonSize * 1.3 /2


  .bellows
    position: absolute
    top: 0
    right: $chordsWidth
    bottom: 0
    left: $melodyWidth
    .slice
      position: absolute
      width: 100% / $bellowsSliceSize
      top: 20px
      bottom: 20px
      +perspective(500)
      &:before, &:after
        content: ''
        position: absolute
        top: -20px
        bottom: -20px
        width: $bellowsSliceBorderWidth
        background: red
        z-index: 10
        left: - $bellowsSliceBorderWidth / 2
        +border-radius(3px)
      &:before
        +background(linear-gradient(left,  #120812, #686d68, #969996, #c6d1c6, #686768))
      &:after
        +background(linear-gradient(left,#495749, #260f26, #dce8dc, #f5fff5, #241024), linear-gradient(left,  #495749, #260f26, #dce8dc, #f5fff5, #241024), linear-gradient(left,  #131013, #363036, #757475, #adb6ad, #281e28), linear-gradient(left,  #131013, #363036, #757475, #adb6ad, #281e28))

        background-position: 0 0, 0 100%, 0 0, 0 100%
        +background-size((100% 15px), (100% 15px), (100% 17px), (100% 17px))
        background-repeat: no-repeat

      &:first-child:before, &:first-child:after
        display: none

      .l, .r
        content: ''
        position: absolute
        top: 0
        bottom: 0
        width: $bellowsSliceHalfWidth
      .l
        left: 2%
        +background(linear-gradient(left, #4f4b4f, #4f4f4f, #4b4b4b, #454545, #404040, #3a3a3a, #353435, #363a36, #1f201f, #000000))
        +transform-origin(0, 50%)
      .r
        left: 48%
        +background(linear-gradient(left, #000000, #000000, #040404, #090909, #0e0e0e, #141414, #1a1a1a, #202420, #151414, #0d030d))
        +transform-origin(100%, 50%)
      @for $i from 1 through $bellowsSliceSize
        &:nth-child(#{$i})
          left: 100% / $bellowsSliceSize * ($i - 1)

  .chords
    position: absolute
    top: 0
    bottom: 0
    right: 0
    width: $chordsWidth
    +background(linear-gradient(#232221, #333333 75%, #1e1d1f))
    .panel
      position: absolute
      top: 0
      bottom: 0
      left: 0
      width: $chordsPanelWidth
      +box-shadow(-30px 0 25px rgba(0,0,0,.5))
      h1
        position: absolute
        //+transform-origin(0, 0)
        +transform(rotate(-90deg))
        top: 50%
        width: 10em
        left: -5em
        margin-top: -.5em
        margin-left: 25px
        letter-spacing: 5px
        text-align: center
        font-size: 32px
        color: #111
        text-shadow: 0 1px 0 rgba(255, 255, 255, .25)
    .buttons
      position: absolute
      top: 40px
      bottom: 40px
      right: 0
      width: $chordsButtonsWidth
      background: rgba(100,100,100,.05)
      +box-shadow(2px 0 2px 0 rgba(0,0,0,.25) inset)
      +border-left-radius(30px)
      button
        position: absolute
        background: none
        border: none
        margin: 0
        padding: 0
        display: block
        width: $chordsButtonSize
        height: $chordsButtonSize
        outline: none
        @for $i from 1 through 13
          &:nth-child(#{$i})
            top: $chordsButtonSize * 1.75 * ($i - 1)
        &:after
          content: ''
          width: $chordsButtonSize
          height: $chordsButtonSize
          position: absolute
          @extend .button
        &:active, &.active
          &:after
            +box-shadow(0 0 2px 2px darken(#fff,15%) inset, -1px 0 2px 1px rgba(0, 0, 0, .75))
      .line-1, .line-2, .line-3
        top: 50%
        margin-top: -($chordsButtonSize * 1.75 * 8 / 2)
        position: absolute
        left: 2px
      .line-1
        button
          left: $chordsButtonSize
      .line-2
        button
          left: $chordsButtonSize*2 + $chordsButtonSize
          margin-top: $chordsButtonSize/3*2
      .line-3
        button
          left: $chordsButtonSize*3 + $chordsButtonSize*2
          margin-top: 0