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

:local(.btn)
  position: relative
  color: $textGray
  background-color: $white
  font-family: $sansserif
  font-size: 16px
  //font-weight: 700
  text-align: left
  width: 100%;
  height: 50px
  line-height: 50px
  padding: 0 10px
  text-decoration: none
  text-transform: uppercase
  text-overflow: ellipsis
  white-space: nowrap
  outline: none
  border: 1px solid $borderGray
  //box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.26)
  cursor: pointer

  &:hover, &:active
    background-color: $darkGray
    border-color: $darkGray
    color: $white

    :local(.mode)
      color: $white

  &[disabled]
    box-shadow: none
    color: $middleGray
    border: 1px solid $lightGray
    cursor: not-allowed

    :local(.mode)
      color: $middleGray

  :local(.icon)
    display: inline-block;
    position: absolute;
    top: 2px
    left: 10px
    margin-right: 5px
    font-size: 22px

    &[disabled]
      :local(.icon)
        color: $middleGray
        background-color: $backgroundGray

:local(.btn.hasIcon)
  padding-left: 50px

:local(.secondary)
  background-color: $backgroundGray
  box-shadow: none

  &:hover, &:active
    background-color: $lightGray
    box-shadow: none

  &:active
    border-color: $white

  &[disabled]
    background-color: $backgroundGray

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

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

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

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

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

:local(.mode)
  display: inline-block;
  position: absolute;
  right: 10px
  color: $darkGray

  [class^="doka-icon-"]
    position: relative
    top: 4px