@import "../css/colors"
@import "../css/vars"

:local(.btn)
  position: relative
  color: $white
  background-color: $blue
  font-family: $sansserif
  font-size: 14px
  height: 50px
  line-height: 48px // 2px are used for the border
  padding: 0 30px
  text-decoration: none
  text-transform: uppercase
  text-overflow: ellipsis
  white-space: nowrap
  outline: none
  border: 1px solid $blue
  // box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.26)
  cursor: pointer

  &:hover, &:active
    background-color: $darkGray
    border: 1px solid $darkGray
    color: $lightGray
    // box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.26)

  &:active
    background-color: $blue
    border-color: $blue
    color: $white

  &[disabled]
    background-color: $white
    box-shadow: none
    color: $borderGray
    border: 1px solid $backgroundGray
    cursor: not-allowed

  :local(.icon)
    position: relative
    top: 6px
    margin-right: 5px
    margin-left: -5px
    font-size: 30px

:local(.btn.minWidth)
  min-width: 160px
  text-align: center;

:local(.secondary)
  background-color: $lightGray
  color: $textGray
  border: 1px solid $lightGray
  box-shadow: none

  &:active
    border-color: $darkGray
    background-color: $darkGray
    color: $textGray

  &[disabled]
    background-color: $white
    border: 1px solid $backgroundGray

:local(.checkboxify)
  padding: 0 0 0 10px

  [class^="doka-icon-"], [class*="doka-icon-"]
    top: 6px;
    font-size: 30px
    position: relative;

:local(.checked)
  [class^="doka-icon-mcheckactive"], [class^="doka-icon-mcheckinactive"]
    color: $blue

  &[disabled]
    [class^="doka-icon-mcheckactive"], [class^="doka-icon-mcheckinactive"]
      color: $middleGray

:local(.large)
  min-width: 50px
  height: 50px
  line-height: 50px

:local(.spinner)
  vertical-align: text-top
  margin-right: 8px

:local(.childrenWrapper)
  display: inline-block

// :local(.toolbar .btn)
//   border-width: 0