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

buttony(raised = false)
  background-color lighten($bg-color, 0%)
  color darken($fg-color, 0%)
  font-family $main-font
  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
    button-gradient $bg-color

  &:hover
    color darken($fg-color, 0%)
    background-color $highlight
    if raised and $enable-gradients
      button-gradient $highlight
  &:active
    background-color $active-highlight
    if raised and $enable-gradients
      button-gradient $highlight, true

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

.full-button
  buttony(true)

.inline-text-input, .inline-dropdown
  buttony()
  text-align left
  box-sizing border-box
  width 100%
  box-shadow-inset()
  &.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
  font-family $main-font
  min-height 1.4em
  display inline-block
  & > 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
    button-gradient $bg-color
  &.checked:before
    content "X"
    font-weight 900
    color activate($bg-color, 40%)
    text-align center
    button-gradient $highlight, true
  &:hover
    background-color $highlight

#toolbar
  background-color #000
  margin 0px
  font-family $main-font
  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: 1.0em
  background-color: rgba(0, 0, 0, 0.5)
  drop-shadow()
  padding: 0
  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%
  & .label-icon-left, & .label-icon-right
    margin 0px 5px

.inline-button
  buttony()
  display inline-block

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