// Buttons Component
// ========================================

// Main Button
.button{
  @include font-type($primary-sans-serif, normal, 700);
  @include position(relative, null null null null);
  @include s-foxtrot;
  @include rem(margin-bottom, 15px);
  @include rem(padding, 10px 12px);
  @include transition (all 0.3s ease-in-out);
  border-radius: 2px;
  display: inline-block;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  -webkit-appearance: none;

  &:hover{ cursor: pointer; opacity: 1; }

  &:focus{
    border: none;
    outline: none;
    text-decoration: none;
  }
}

// Button Styles
@each $button in $buttons{
  $type:  nth($button, 1);
  $bg-1:  nth($button, 2);
  $color: nth($button, 3);

  .button--#{$type}{
    background: $bg-1;
    border-radius: 2px;
    color: $color;

    &:hover{
      background-color: darken($bg-1, 5%);
      opacity: 1;
    }

    &:active{
      background-color: darken($bg-1, 3%);
      color: darken($bg-1, 5%);
    }

    &:focus{ @include box-shadow(0 0 0, transparent); border: none; }
  }

  .button--header{
    @include box-shadow(0 0 10px, rgba(0, 0, 0, 0.25));
    @include rem(margin, 15px auto);
    @include rem(padding, 15px 35px);
    text-transform: uppercase;

    &:hover{ @include box-shadow(0 0 0, rgba(0, 0, 0, 0)); }
  }


  // Links
  .link-#{$type}{
    color: $bg-1;

    &:hover{ opacity: 0.6; }
  }

  .link__underline{
    text-decoration: underline;
    &:hover{ text-decoration: underline; }
  }
}


// Button List Styles
.button-list{
  @include span-columns(12 of 12);
  text-align: center;

  li{ display: inline; }

  li > a{
    @include rem(min-width, 135px);
    display: inline-block;
  }
}


// Button Scroll
.button--scroll{
  @include box-shadow(0 4px 15px, rgba(0, 0, 0, 0.25));
  @include position(absolute, null 10% -25px null);
  @include rem(height, 45px);
  @include rem(width, 45px);
  background-color: $white-base;
  border-radius: 30em;

  &:hover{ opacity: 0.85; }

  .icon{
    @include position(absolute, 20px 0 null 0);
    @include rem(width, 20px);
    margin: 0 auto;
  }
}

.button--small {
  @include rem(padding, 5px 8px);
  @include s-hotel;
}