/* ==========================================================================
 * BUTTON COMPONENT
 *
 * Button
 *
 * Classes that can be used on an `<a>`, `<button>` or `<input>` element.
 *
 * .c-btn--primary - Use this class to indicate that the button is the primary
 *                   feature of this form.
 * .c-btn--remove  - Use this class to indicate that the button will remove a
 *                   feature, or other negative connotations.
 * ========================================================================== */

/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 */
.c-btn {
  display: inline-block; /* [1] */
  vertical-align: middle; /* [2] */
  font: inherit; /* [3] */
  text-align: center; /* [4] */
  margin: 0; /* [4] */
  cursor: pointer; /* [5] */
  padding: $globalSpacingSm $globalSpacing;
}




/* Style variants
 * ========================================================================== */

.c-btn--primary {
  background-color: #4a8ec2;

  &,
  &:hover,
  &:active,
  &:focus {
    text-decoration: none; /* [4] */
    color: #fff;
  }

  &:hover,
  &:focus {
    background-color: #3774a2;
  }
}

.c-btn--secondary {
  background-color: #2f4054;

  &,
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
    color: #fff;
  }

  &:hover,
  &:focus {
    background-color: #1d2733;
  }
}

.c-btn--tertiary {
  background-color: #fff;
  color: #4a8ec2;

  &,
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
    color: #4a8ec2;
  }

  &:hover,
  &:focus {
    color: #3774a2;
  }
}




/* Size variants
 * ========================================================================== */

.c-btn--small {
  padding: $globalSpacingXs $globalSpacingSm;
}

.c-btn--large {
  padding: $globalSpacing $globalSpacingLg;
}




/* Ghost buttons
 *
 * Ghost buttons have see-through backgrounds and are bordered.
 * ========================================================================== */

$btnGhostBorderWidth: 2px;

.c-btn--ghost {
  border: $btnGhostBorderWidth solid currentColor;
  padding: ($globalSpacingSm - $btnGhostBorderWidth) ($globalSpacing - $btnGhostBorderWidth);

  &,
  &:hover,
  &:active,
  &:focus {
    background: none;
  }

  &.c-btn--small {
    padding: ($globalSpacingXs - $btnGhostBorderWidth) ($globalSpacingSm - $btnGhostBorderWidth);
  }

  &.c-btn--large {
    padding: ($globalSpacing - $btnGhostBorderWidth) ($globalSpacingLg - $btnGhostBorderWidth);
  }

  &.c-btn--primary {
    color: #4a8ec2;

    &:hover,
    &:focus {
      color: #3774a2;
    }
  }

  &.c-btn--secondary {
    color: #2f4054;

    &:hover,
    &:focus {
      color: #1d2733;
    }
  }

  &.c-btn--tertiary {
    color: #fff;

    &:hover,
    &:focus {
      color: #fff;
    }
  }
}