$speed : .2s
$ease : ease-out
$opacityIn: .2s ease-in
$opacityOut: .2s ease-out
$delay : .1s

$textMovingDistance : 10px
$arrowMovingDistance : 0

// Btn class
.btn
  display: inline-block
  position: relative
  overflow: hidden
  +grid-padding-s( $left: .5, $right: 1)
  +grid-height-s

  border-radius: $border-radius
  border: 1px solid #00A6FF
  background: rgba(51,183,255,1)

  color: #fff
  font-size: 1.3em
  text-align: left
  +grid-line-height-s(.9)
  cursor: pointer

  +transition(background-color $speed $ease, border-color $speed $ease)

  // Button with lock
  &.safe
    +grid-padding-s( $left: 1.25)

    .lock
      +btn-lock
  &.grey
    border: 1px solid #a8a5a3
    background: #a8a5a3

  .text
    display: block
    position: relative
    white-space: nowrap
    top: 0
    left: 0
    +transition(left $speed $ease $delay, opacity $opacityOut $delay)

  &:hover
    background-color: #0086E7
    border-color: #0086E7

    //.text
    //  left: $textMovingDistance
    //  opacity: 0
    //  +transition(left $speed $ease 0s, opacity $opacityIn 0s)

.btn-holder.btn-right
  float: right

// Pseudo-class for arrow on links
.btn::after
  +btn-arrow
  content: ''

// Button holder for input fields
.btn-holder
  position: relative
  float: left

.btn input
  display: block
  +position(absolute, 0 null null 0)
  z-index: 100
  width: 100%
  height: 100%
  opacity: 0


//.btn::before
//  content: attr(data-text)
//  +position(absolute, 0 null null (-1 * $textMovingDistance))
//  +grid-padding-s($left: .5, $right: 1)
//  width: 100%
//  height: 100%
//  color: #fff
//  opacity: 0
//
//  +transition(left $speed $ease 0s,opacity $opacityIn 0s)

//.btn:hover::before
//  left: 0
//  opacity: 1
//  +transition(left $speed $ease $delay,opacity $opacityOut $delay)


.btn.animate.safe::before
  +grid-padding-s( $left: 1.25)


.btn.animate.green-btn:hover
  background-color: $green
  border-color: $green


// Arrow as "after"
.btn.animate:hover::after
  +transform(translateX($arrowMovingDistance))

// Back to previous page
.back-btn
  display: inline-block
  position: relative
  +grid-padding-s( $left: .5)

  color: $blue
  +type-small-title-uc

  &::before
    content: ''
    +btn-arrow('<')

=button-hover
  background-color: #0086E7
  border-color: #0086E7

  //.text
  //  left: $textMovingDistance
  //  opacity: 0
  //  +transition(left $speed $ease 0s, opacity $opacityOut 0s)
  //
  //&::after
  //  +transform(translateX($arrowMovingDistance))
  //
  //&::before
  //  left: 0
  //  opacity: 1
  //  +transition(left $speed $ease $delay,opacity $opacityOut $delay)