// RAMEN TYPOGRAPHY STYLES
//
//
// Required Global Variables:
// $c-link
// $c-link-visited
// $c-link-hover
// $spacing-medium
// $font-size-1
// $font-size-1-mobile
// $font-size-2
// $font-size-2-mobile
// $font-size-3
// $font-size-3-mobile
// $font-size-4
// $font-size-4-mobile
//
//
// Required Component Variables:
//
// $heading-line-height
// $heading-font-family
// $heading-font-weight
// $text-line-height: 1.4;
// $text-font-family
// $text-font-weight:
//
//

// Heading base
@mixin heading-base {
  line-height: $heading-line-height;
  font-family: $heading-font-family;
  font-weight: $heading-font-weight;
  margin-bottom: $spacing-medium;
}

// Heading 1
@mixin heading-1 {
  @include heading-base;
  font-size: $font-size-1-mobile;

  @include breakpoint($bp-medium) {
    font-size: $font-size-1;
  }
}

// Heading 2
@mixin heading-2 {
  @include heading-base;
  font-size: $font-size-2-mobile;

  @include breakpoint($bp-medium) {
    font-size: $font-size-2;
  }
}

// Heading 3
@mixin heading-3 {
  @include heading-base;
  font-size: $font-size-3-mobile;

  @include breakpoint($bp-medium) {
    font-size: $font-size-3;
  }
}

// Heading 4
@mixin heading-4 {
  @include heading-base;
  font-size: $font-size-4-mobile;

  @include breakpoint($bp-medium) {
    font-size: $font-size-4;
  }
}

// Text base
@mixin text-base {
  font-family: $text-font-family;
  font-weight: $text-font-weight;
  line-height: $text-line-height;
}

// Body text
@mixin body-text {
  @include text-base;
  font-size: $font-size-base;

  @include breakpoint($bp-medium) {
    font-size: $font-size-large;
  }
}

// Button
@mixin button-text {
  @include text-base;
  font-size: $font-small;

  @include breakpoint($bp-medium) {
    font-size: $font-size-base;
  }
}

// Label
@mixin label-text {
  @include text-base;
  font-size: $font-small;

  @include breakpoint($bp-medium) {
    font-size: $font-size-base;
  }
}

// Caption
@mixin caption-text {
  @include text-base;
  font-size: $font-small;

  @include breakpoint($bp-medium) {
    font-size: $font-size-base;
  }
}

// Tag
@mixin tag-text {
  @include text-base;
  font-size: $font-xxsmall;
}

// Link Styles
@mixin text-link {
  &,
  &:link {
    border-bottom: 1px solid $c-link;
    color: $c-link;
    text-decoration: none;

    &:visited,
    &:active {
      color: $c-link-visited;
    }

    &:hover {
      color: $c-link-hover;
      border-bottom-color: transparent;
    }
  }
}