/* ==========================================================================
   Buttons
   ========================================================================== */

   /*
   * Main settings for each button
   *
   * 1. Reset default link property
   */

.button
  position: relative

  display: inline-block
  min-width: 247px
  height: 53px
  padding: 0 20px
  border-radius: 11px

  font-size: 18px
  letter-spacing: -0.36px
  line-height: 51px
  text-decoration: none
  cursor: pointer

  &:focus
    outline: none

  /* Color types
   ========================================================================== */

  &.stroked.white
    border: 2px solid #fff
    color: #fff

    &:hover
      border-color: $blue
      color: #fff
      background: $blue

  &.stroked.blue
    border: 2px solid $blue
    color: $blue

    &:hover
      border-color: #fff
      color: #fff
      background: $blue

  &.blue
    background-color: $buttonBlue
    color: #fff
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)
    -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)

    &:hover
      border-color: #fff
      color: #fff
      background: $blue

  &.stroked.light-blue
    border: 2px solid $lightBlue
    color: $lightBlue

    &:hover
      border-color: #fff
      color: #fff

  &.orangeGrad
    background: linear-gradient(-90deg, $lightOrange 0%, $darkOrange 100%)
    color: #fff

  /* Icons
   ========================================================================== */

  // Thumbs up icon
  &.like
    padding-left: 52px

    &:before
      position: absolute
      top: 14px
      left: 14px

      width: 25px
      height: 24px

      content: ''
      +sprite(-45px -60px)

  // Arrow right icon
  &.arrow
    padding-right: 52px

    // Set up arrow position
    &:after
      content: ""
      position: absolute
      right: 10%
      top: 1px
      width: 14px
      height: 100%
      background-position: 0px center
      background-size: 500%
      background-repeat: no-repeat
      background-image: url("/img/svg/button_arrow.svg")

      //+transition(right 200ms ease-out)
    //
    //&:hover:before
    //  right: 18px
    //
    //// White arrow
    //&.stroked.white:before
    //  +arrowsprite(-40px -35px)
    //
    ////// Blue arrow
    //&.stroked.blue
    //  &:before
    //    +arrowsprite(-20px -35px)
    //  &:hover:before
    //    +arrowsprite(-40px -35px)
    //
    //// Blue Arrow down
    //&.stroked.blue.down:before
    //  +arrowsprite(-20px -20px)
    //
    //// Light blue Arrow
    //&.stroked.light-blue
    //  &:before
    //    +arrowsprite(-60px -40px)
    //  &:hover:before
    //    +arrowsprite(-40px -35px)
    //
    //// Light blue Arrow
    //&.stroked.footer
    //  &:before
    //    +arrowsprite(-40px -20px)
    //  &:hover:before
    //    +arrowsprite(-40px -35px)