@import 'colors.styl'

buttony()
  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
  -webkit-user-select none

  &:hover
    background-color $highlight
  &:active
    background-color $active-highlight

.full-button
  buttony()

.inline-text-input
  buttony()
  text-align left
  box-sizing border-box
  width 100%
  &.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