.score-controls
  flex-grow: 0
  position: relative
  > .columns
    margin-bottom: 0
  .button
    display: inline-block
    width: 100%
  .field-label .label
    font-size: .9em
  .field.is-horizontal
    .field-label
      margin-right: 1em
    .field-body
      input[type=number]
        min-width: 72px
  .play-control
    margin-top: 0
    margin-bottom: 0
    .click-control, .loop-control
      .field-body
        .control
          height: calc(2.25em - .3em)
          text-align: center
          .switch
            left: 0
            & + label
              display: block
              padding-top: 0
              &:before
                width: 100%
                line-height: 2.25rem
                font-size: 1rem
                font-weight: bold
                transition: all .25s ease-out
                color: #fff
            &:checked + label
              &:before
                color: #fff
              &:after
                left: calc(100% - 2rem)
    .click-control .switch + label:before
      content: "click"
    .loop-control .switch + label:before
      content: "loop"
  .key-control, .undo-control
    > div
      flex-grow: 1
  //.instrument-control
  .beat-control
    .select, select
      width: 100%
  .sound-control
    margin: .2rem 0
  .volume-control
    display: flex
    width: 100%
    margin-top: -.8rem
    .icon
      opacity: .8
      margin: 1rem 0
      &:first-of-type
        margin-right: .5rem
        margin-left: -.3rem
      &:last-of-type
        margin-left: .5rem

@media screen and (max-width: $tablet - 1px)
  .score-controls
    > .columns
      display: flex
    .instrument-control
      .select, select
        width: 100%
    .is-horizontal
      display: flex
      .field-label.is-normal
        padding-top: .375em
      .field-body
        width: 100%
