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

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

.button
  position: relative
  
  display: inline-block
  min-width: 200px
  padding: 0 20px
  border-radius: 4px

  line-height: 45px
  font-size: .9rem
  font-weight: semibold()
  text-decoration: none /* 1 */
  cursor: pointer
  +transition(all 200ms ease-out)

  /* Sizes
   ========================================================================== */

  &.small
    min-width: 0

  /* 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

  &.stroked.black
    border: 2px solid $bodyText
    color: $black

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

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

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

  &.stroked.footer
    border: 2px solid $footerTextColor
    color: $footerTextColor

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

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

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

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

      width: 25px
      height: 24px

      content: ''
      +sprite(-45px -60px)
      +transition(transform 200ms ease-out)

    &:hover:before
      +transform(rotate(-5deg))

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

    // Set up arrow position
    &:before
      position: absolute
      top: 17px
      right: 23px

      width: 14px
      height: 14px

      content: ''
      +transition(right 200ms ease-out)

    &.small:before
      top: 17px

    &:hover:before
      right: 18px

    // White arrow
    &.stroked.white:before
      +sprite(-40px -35px)

    // Blue arrow
    &.stroked.blue
      &:before
        +sprite(-20px -35px)
      &:hover:before
        +sprite(-40px -35px)

    // Black arrow
    &.stroked.black
      &:before
        +sprite(-80px -20px)
      &:hover:before
        +sprite(-40px -35px)

    // Blue Arrow down
    &.stroked.blue.down:before
      +sprite(-20px -20px)

    // Light blue Arrow
    &.stroked.light-blue
      &:before
       +sprite(-60px -40px)
      &:hover:before
        +sprite(-40px -35px)

    // Light blue Arrow
    &.stroked.footer
      &:before
       +sprite(-40px -20px)
      &:hover:before
        +sprite(-40px -35px)


.back-to-grid
  display: inline-block
  position: relative
  color: $black
  font-size: .9rem
  font-weight: medium()
  text-decoration: none
  padding-left: 42px

  // Grid
  &:before
    +position(absolute, 6px null null 0)
    content: ''
    width: 16px
    height: 16px
    +sprite(-100px -40px)

  // Arrow
  &:after
    +position(absolute, 8px null null 23px)
    content: ''
    width: 14px
    height: 14px
    +sprite(-100px -20px)