// --------------------------------------------
// Typography Mixins --------------------------
// --------------------------------------------

// Font-size and line-height shorthand
// @example
// @include font-size(18, 24);
@mixin font-size($size, $line-height: $size) {
  font-size: $size;
  line-height: $line-height;
}


// Font styling shorthand
// @example
//  @include font(arial, bold, 18px, 1.5);
@mixin font($family, $weight, $size, $line-height: $size) {
  font-family: $family;
  font-weight: $weight;

  @include font-size($size, $line-height);
}


// Header family and weight properties.
@mixin f-header {
  font-family: $font-family;
  font-weight: $font-weight-bold;
}


// Header typography settings.
// @example
//  Output all properties (font-size, line-height, family, weight)
//  @include font-header(lg);
//
//  Output font-size and line-height only
//  @include font-header(lg, $size-only: true);
@mixin font-header($font-size: md, $line-height: md, $size-only: false) {
  @include font-size($font-size, $line-height);

  @if $size-only == false {
    @include f-header;
  }
}

@mixin header($value: md, $size-only: false) {
  $line-height: config($font-header, $value, 'line-height');
  $font-size: config($font-header, $value, 'font-size');

  @include font-size($font-size, $line-height);

  @if $size-only == false {
    @include f-header;
  }
}

// Body family property.
@mixin f-body {
  font-family: $font-family;
  font-weight: $font-weight-normal;
}


// Body text settings.
// @example
//  Output all properties (font-size, line-height, family)
//    @include font-body(sm);
//
//  Output font-size and line-height only
//    @include font-body(sm, $size-only: true);
@mixin font-body($font-size: md, $line-height: md, $size-only: false) {
  @include font-size($font-size, $line-height);

  @if $size-only == false {
    @include f-body;
  }
}

@mixin body($value: md, $size-only: false) {
  $line-height: config($font-body, $value, 'line-height');
  $font-size: config($font-body, $value, 'font-size');

  @include font-size($font-size, $line-height);

  @if $size-only == false {
    @include f-body;
  }
}


// List-base for adding repeating list style
// @example
//   @include list-base;
@mixin list-base {

  @include body(lg);

  margin: $space-0;
  padding: $space-0;
  color: $color-gray-7;
  font-weight: $font-weight-normal;
}


// Link-style for adding standard links
// @example
//    @include link-style;
@mixin link-style {
  cursor: pointer;
  color: $font-link-color;
  font-size: $font-size-2;
  line-height: $line-height-sm;
  text-decoration: $font-link-style;

  &-hover,
  &:hover {
    color: $font-link-color-hover;
    text-decoration: $font-link-style-hover;
  }

  &-active,
  &:active {
    color: $font-link-color-active;
    text-decoration: $font-link-style-hover;
  }

  &-disabled,
  &[disabled],
  &:disabled {
    &,
    &:hover,
    &:focus,
    &:active,
    &:visited {
      cursor: not-allowed;
      color: $color-gray-4;
      text-decoration: $font-link-style;
    }
  }
}