@import 'colors.styl'
@import 'mixins.styl'

buttony(raised = false)
  background-color lighten($bg-color, 0%)
  color darken($fg-color, 0%)
  font-family Monospace
  border $normal-border
  padding 1em
  text-decoration none
  display block
  text-align center
  margin-top 0.5em
  margin-bottom 0.5em
  user-select none
  if raised and $enable-gradients
    background-linear-gradient top, lighten($bg-color, 10%), 40%, darken($bg-color, 10%), 100%

  &:hover
    background-color $highlight
    if raised and $enable-gradients
      background-linear-gradient top, lighten($highlight, 10%), 40%, darken($highlight, 10%), 100%
  &:active
    background-color $active-highlight
    if raised and $enable-gradients
      background-linear-gradient top, darken($highlight, 10%), 40%, lighten($highlight, 10%), 100%

  & > .label-icon-left
    float left
  & > .label-icon-right
    float right

.full-button
  buttony(true)

.inline-text-input
  buttony()
  text-align left
  box-sizing border-box
  width 100%
  if $enable-gradients
    box-shadow inset 0px 0px 2px 2px darken($bg-color, 20%)
  &.unclicked
    color darken($fg-color, 50%)
  textarea&
    height 25em

input::-webkit-input-placeholder
    color darken($fg-color, 50%)

input:focus::-webkit-input-placeholder
      opacity 0

.inline-checkbox
  padding 0.2em
  -webkit-user-select none
  user-select none
  & > span
    vertical-align middle
  & input[type=checkbox]
    display: none
  &:before
    display inline-block
    vertical-align middle
    content " "
    width 1em
    height 1em
    border $normal-border
    margin-right 0.5em
  &.checked:before
    background-color activate($bg-color, 40%)
  &:hover
    background-color $highlight

#toolbar
  background-color #000
  margin 0px
  font-family Monospace
  height calc(2% + 15px)

.tool-button
  float left
  padding 0.5em
  margin 0
  text-decoration none
  color $fg-color
  border-right 1px solid
  border-left 1px solid
  margin-right 0.0em
  &:hover
    background-color #333

.button-box
  position: absolute
  top: 0.5em
  right: 0.5em
  margin-right: 0.5em
  background-color: rgba(0, 0, 0, 0.5)
  padding: 0.5em
  z-index: 3

  & .full-button, .inline-text-input, .inline-checkbox
    float: left
    margin: 0
    padding: 0.2em
  & .full-button:active, .inline-checkbox:active
    margin-top: 0.1em
    margin-bottom: -0.1em
  & .inline-text-input
    width auto
  & .inline-checkbox
    border $normal-border
    &:before
      border 1px solid darken($fg-color, 70%)
      height 50%

.inline-button
  buttony()
  display inline

.floating-button
  buttony()
  float: left
  margin: 0
  padding: 0.2em
  &:active
    margin-top: 0.1em
    margin-bottom: -0.1em