//
// Buttons
//

$btn-padding-y: 8px;
$btn-padding-x: $btn-padding-y * 1.8;

.rf-btn,
.rf-btn[type="button"],
%rf-btn {
  -webkit-appearance: initial;
  border: 1px solid transparent;
  border-radius: $border-radius;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  height: auto;
  line-height: 1.1em;
  padding: $btn-padding-y $btn-padding-x;
  position: relative;
  text-align: center;
  text-decoration: none !important;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;

  @include hocus {
    outline: none;
    text-decoration: none !important;
  }
}

// Side by side buttons

.rf-btn + .rf-btn {
  margin-left: 8px;
}


//
// BUTTON TYPES
//

// PRIMARY

.rf-btn--primary,
%rf-btn--primary {
  background-color: $blue-bright;
  border-color: $blue-bright;
  color: $white;

  @include hocus {
    background-color: $navy;
    border-color: $navy;
    color: $white;
  }
}

// SECONDARY

.rf-btn--secondary,
%rf-btn--secondary {
  background-color: $white;
  border-color: $cloudy;
  color: $charcoal;

  @include hocus {
    background-color: $white;
    border-color: $slate;
    color: $charcoal;
  }
}

// LINK

.rf-btn--link {
  background-color: transparent;
  border: 1px solid transparent;
  color: $blue-bright;

  @include hocus {
    background-color: transparent;
    border: 1px solid transparent;
    color: $navy;
  }
}

// DROPDOWN

.rf-btn--dropdown {
  @extend %rf-btn--secondary;
  font-weight: 400;

  &:after {
    content: "\f0d7";
    display: inline-block;
    font-family: $font-icon-f5;
    font-size: .8em;
    font-weight: 900;
    line-height: 1em;
    margin-left: 7px;
  }
}

// WARNING

.rf-btn--warning {
  background-color: $gold;
  border-color: $gold;
  color: $white;

  @include hocus {
    background-color: $dandelion;
    border-color: $dandelion;
    color: $white;
  }

  // Warning icon

  &:before {

    @extend %icon--warning;

    color: $white;
    display: inline-block;
    font-size: 1em;
    line-height: .6em;
    margin-right: 4px;
  }
}

// ERROR

.rf-btn--error {
  background-color: $red;
  border: 1px solid $red;
  color: $white;

  @include hocus {
    background-color: $crimson;
    border-color: $crimson;
    color: $white;
  }
}


//
// BUTTON SIZES
//

.rf-btn--large,
%rf-btn--large {
  font-size: 18px;
  height: 50px;
  min-width: 90px;
  padding: ($btn-padding-y*1.7) ($btn-padding-x*1.7);
}

.rf-btn--small {
  font-size: 11px;
  min-width: 50px;
  padding: ($btn-padding-y*.5) ($btn-padding-x*.5);
}


//
// BUTTON HELPERS
//

// Disabled

.rf-btn--disabled,
.rf-btn[disabled] {
  cursor: not-allowed;
  opacity: .2;
  pointer-events: none;
}

// Hiding button
// A button that hides when more info is expanded

.rf-btn--tohide[aria-expanded='true'] {
  display: none;
}

// Multiline button
// Smaller padding for more text

.rf-btn--multiline {
  padding: ($btn-padding-y*.8) $btn-padding-x;

  &.rf-btn--small {
    padding: ($btn-padding-y*.3) ($btn-padding-x*.5);
  }

  &.rf-btn--large {
    padding: ($btn-padding-y*.8) ($btn-padding-x*1.4);

    .rf-btn__text {
      font-size: 13px;
      line-height: 1.2em;
    }
  }

  // Small text beneath main text

  .rf-btn__text {
    display: block;
    font-weight: 400;
    margin: auto;
  }
}

// Error hover
// Only looks like an error button on hover

.rf-btn--errorhover {
  @include hocus() {
    background-color: $red;
    border: 1px solid $red;
    color: $white;
  }
}

// Light button
// For use on top of dark backgrounds
// Only works with secondary and dropdown types

.rf-btn--light {
    background-color: rgba(255,255,255, .3);
    border: 1px solid $white;
    color: $white;

    @include hocus() {
      background-color: transparent;
      border-color: $white;
      color: $white;
    }
}


//
// BUTTON ASSOCIATES
//

// Helper text associated with button

.rf-btn__helpertext {
  font-size: 12px;
  height: 20px;
  margin-bottom: 0;
  width: 100%;
}

// Button wrapper
// Used for tooltips and alignment

.rf-btn__wrapper {
  display: block;
}

.rf-btn__wrapper + .rf-btn__wrapper {
  margin-left: 8px;
}


//
// BUTTON GROUPINGS
//

// BUTTON GROUP
// For groups of buttons that touch each other

.rf-btn-group {
  > .rf-btn {
    border-radius: 0;
    display: block;
    float: left;
    margin-left: -2px;
    width: auto;
  }

  > .rf-btn:first-of-type {
    border-radius: $border-radius 0 0 $border-radius;
  }

  > .rf-btn:last-of-type {
    border-radius: 0 $border-radius $border-radius 0;
  }

  // Remove border color change on hover because the borders
  // are problematic w/ the negative margin left

  .rf-btn--secondary {
    @include hocus() {
      background-color: $prewhite;
      border-color: $cloudy;
    }
  }
}

// BUTTON SET
// Fills up given area w/ buttons

.rf-btn-set {
  display: flex;
  width: 100%;

  .rf-btn {
    flex-grow: 1;
    padding-left: 4px;
    padding-right: 4px;
  }
}