// Define arrow
=btn-arrow($dir: '>')
  display: block
  top: 50%
  z-index: 10
  margin-top: -5px
  +transform(rotate3d(0, 0, 1, 0deg))
  +transition(transform 0.3s ease-in)
  @extend %icon-sprite

  @if $dir == '>'
    +grid-position-s($right: .3)
    +icon-sprite(0,0,6px,10px)
  @else
    +grid-position-s($left: 0)
    +icon-sprite(8,2,9px,10px)

=btn-lock
  display: block
  top: 50%
  +grid-position-s($left: 0.4)
  z-index: 10
  margin-top: -9px
  @extend %icon-sprite
  +icon-sprite(7,2,12px,16px)

// Btn class
.btn
  display: inline-block
  position: relative
  overflow: hidden
  +grid-padding-s( $left: .25, $right: .75)
  +grid-height-s
  border-radius: $border-radius
  border: 1px solid #00A6FF

  //+linear-gradient(rgba(51,183,255,1) 0%,rgba(28,175,255,1) 25%,rgba(0,166,255,1) 100%)
  background: rgba(51,183,255,1)
  +transition(background-color 0.3s ease-in, color 0.3s ease-in)

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

  &.safe
    +grid-padding-s( $left: 1.25)

    &::before
      +btn-lock
      content: ''

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

// Button holder for input fields
.btn-holder
  position: relative
  float: left
  // Arrow for input fields
  .arrow
    +btn-arrow
    +transform(rotate3d(0, 0, 1, 0deg))
    +transition(transform 0.3s ease-in)

  .lock
    +btn-lock

  &:hover
    .arrow
      +transform(rotate3d(0, 0, 1, 360deg))

// 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 twist hover
.btn.twist::before
  content: attr(data-text)
  position: absolute
  top: 30px
  left: 0
  width: 100%
  height: 100%
  color: #fff
  +grid-padding-s( $left: .25, $right: .75)
  +transform-origin(-25% 50%)
  +transform(rotate3d(0, 0, 1, 45deg))
  +transition(transform 0.3s ease-in,top 0.3s ease-in)

.btn.twist:hover::before,
.btn.twist:hover
  -webkit-transition-timing-function: ease-out
  transition-timing-function: ease-out

.btn.twist:hover
  background-color: rgba(0,120,255,1)
  color: rgba(0,120,255,1)

.btn.twist:hover::before
  top: 0
  +transform(rotate3d(0, 0, 1, 0deg))

.btn.twist:hover::after
  +transform(rotate3d(0, 0, 1, 360deg))

.btn input
  position: absolute
  display: block
  left: 0
  right: 0
  +grid-height-s
  background: transparent
  width: 100%

.btn.safe.input
  padding: 0
  width: 100%
  &::before
    +btn-lock
    content: ''
  &::after
    content: ''

// Cart Button
.list-cart-btn
  +transition(background-color 0.1s ease-in,border-color 0.1s ease-in)

.list-cart-btn:hover
  background-color: $green
  border-color: $green