// ============================================================================
// :: Button
// ============================================================================
/**
 * Simple component to render a clickeable button. Using modifiers we manipulate
 * its padding, colors, typography, ...
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-button {
  display: inline-block;
  padding: 1.2rem 3rem;

  color: $bp-text-color-light;
  background-color: $bp-primary-color;

  font-size: $bp-font-size-1x-small;
  line-height: $bp-line-height-1x-small;
  font-weight: $bp-font-weight-bold;
  letter-spacing: 0.1rem;
  text-decoration: none;
  text-transform: uppercase;

  white-space: nowrap;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.bp-button--secondary {
  border: 1px solid $bp-primary-color;
  background-color: transparent;
  color: $bp-primary-color;
}