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

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

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

    :local(.mode)
      color: $white

  &[disabled]
    box-shadow: none
    color: $middleGray
    background-color: $backgroundGray
    border: 1px solid $lightGray
    cursor: default

    :local(.mode)
      color: $middleGray

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

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

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

  :local(.icon)
    display: inline-block;
    position: absolute;
    top: -1px
    left: -1px
    color: $white
    background-color: $blue
    border-right: 1px solid $blue
    width: 72px
    height: 72px
    text-align: center;

    [class^="doka-icon-"]
      position: relative
      font-size: 32px;
      line-height: 70px;

  &[disabled]
    background-color: $white
    border: solid 1px $backgroundGray
    cursor: not-allowed;

    :local(.icon)
      top: 0
      left: 0
      width: 70px
      height: 70px
      color: $borderGray
      border-right: 1px solid $backgroundGray
      background-color: $white

      [class^="doka-icon-"]
        line-height: 70px;

:local(.dropdown)
  // box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2)

  ul
    margin: 0
    padding: 0

    > :not(:first-child)
      border-top: 1px solid $backgroundGray;

:local(.open)
  border: solid 1px $lightGray
  border-top: none

:local(.listItem)
  display: flex
  justify-content: space-between
  align-items: center
  list-style: none
  padding: 1.2em 1em
  color: $textGray
  background-color: $lightGray
  margin-top: 1px
  cursor: pointer

  &:hover
    background-color: $darkGray
    color: $white

  :local(.label)
    text-transform: uppercase
    font-family: $sansserif
    //font-weight: 700
    font-size: 16px
    margin-left: 10px
    text-overflow: ellipsis
    white-space: nowrap
    overflow: hidden
    flex-grow: 1