// ============================================================================
// :: Link
// ============================================================================
/**
 * Simple component used to display a link. This component should lead the user
 * towards a new page within the brandplatform.
 */

// ============================================================================
// :: Settings
// ============================================================================
$icon-spacing: 1.5rem;

// ============================================================================
// :: Root
// ============================================================================
.bp-link {
  display: inline-block;

  font-weight: $bp-font-weight-bold;
  text-decoration: underline;

  color: $bp-text-color-secondary;

  &:active,
  &:visited {
    color: $bp-text-color-secondary;
  }

  // styling applied when there is an icon generated by the iconfont
  &[class*="bp-icon-"] {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &::before {
      margin-right: $icon-spacing;
    }
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.bp-link--icon-after {
  display: flex;
  align-items: center;

  &::before {
    order: 2;
    margin-right: 0;
    margin-left: $icon-spacing;
  }
}