@import 'sass/bourbon/bourbon'

.component_group
  display: inline-block

.draggable
  cursor: move

.playbacksvg
  .button-art
    border: none
    fill: #777 !important
    stroke: transparent !important
    stroke-width: 0 !important
  .bg
    fill: #ddd
    stroke: #aaa
    stroke-width: 1px
  .highlight
    border: solid 1px #ccc
    border-bottom: none
    fill: #fff
    opacity: 0.6
    stroke: transparent
    stroke-width: 0
  .pause-center
    border: none
    fill: #ddd
    stroke: transparent
    stroke-width: 0

.playbacksvgbutton
  .button-art
    border: none
    fill: #777 !important
    stroke: transparent !important
    stroke-width: 0 !important
  .bg
    fill: #ddd
    stroke: #aaa
    stroke-width: 1px
  .highlight
    border: solid 1px #ccc
    border-bottom: none
    fill: #fff
    opacity: 0.6
    stroke: transparent
    stroke-width: 0
  .pause-center
    border: none
    fill: #ddd
    stroke: transparent
    stroke-width: 0
.playbacksvgbutton:hover
  .button-art
    fill: #777 !important
    stroke: transparent !important
    stroke-width: 0 !important
  .bg
    fill: #bbb
  .highlight
    opacity: 0.3
  .pause-center
    fill: #bbb
.playbacksvgbutton:active
  .button-art
    fill: #666 !important
    stroke: transparent !important
    stroke-width: 0 !important
  .bg
    fill: #a5a5a5
  .highlight
    opacity: 0.2
  .pause-center
    fill: #a5a5a5
