@import "settings";
@import "foundation-sites/scss/foundation";

/// Set to false to not include typography in the bundle
/// @type Bool
$bonsai-include-typography: $bonsai-include-components !default;

/* -- Bonsai Variables -- */

/* headings */

/// Font family for header elements.
/// @type String | List
$bonsai-heading-font-family: "Arial Black", "Arial Bold", "Gadget", Arial, sans-serif !default;

/// Font weight for header elements
/// @type String
$bonsai-heading-font-weight: bold !default;

/// Default font size for h1
/// @type Number
$bonsai-h1-font-size: ($bonsai-global-font-size * 1.75) !default;

/// Default line height for h1
/// @type Number
$bonsai-h1-line-height: unitless-calc($bonsai-h1-font-size + $bonsai-spacing-base * 2, $bonsai-h1-font-size) !default;

/// Default bottom margin for h1
/// @type Number
$bonsai-h1-margin-bottom: $bonsai-h1-font-size !default;

/// Default font size for h2
/// @type Number
$bonsai-h2-font-size: ($bonsai-global-font-size * 1.5) !default;

/// Default bottom margin for h2
/// @type Number
$bonsai-h2-margin-bottom: $bonsai-h2-font-size !default;

/// Default line height for h2
/// @type Number
$bonsai-h2-line-height: unitless-calc($bonsai-h2-font-size + $bonsai-spacing-base * 2, $bonsai-h2-font-size) !default;

/// Default font size for h3
/// @type Number
$bonsai-h3-font-size: ($bonsai-global-font-size * 1.25) !default;

/// Default line height for h3
/// @type Number
$bonsai-h3-line-height: unitless-calc($bonsai-h3-font-size + $bonsai-spacing-base * 2, $bonsai-h3-font-size) !default;

/// Default bottom margin for h3
/// @type Number
$bonsai-h3-margin-bottom: $bonsai-h3-font-size !default;

/// Default font size for h4
/// @type Number
$bonsai-h4-font-size: ($bonsai-global-font-size * 1.15) !default;

/// Default bottom margin for h4
/// @type Number
$bonsai-h4-margin-bottom: $bonsai-h4-font-size !default;

/// Default line height for h4
/// @type Number
$bonsai-h4-line-height: unitless-calc($bonsai-h4-font-size + $bonsai-spacing-base * 2, $bonsai-h4-font-size) !default;

/// Combined list of size, height, margin values for each style
/// @type Map
$header-styles: (
  small: (
    'h1': ('font-size': $bonsai-h1-font-size, 'line-height': $bonsai-h1-line-height, 'margin-bottom': $bonsai-h1-margin-bottom),
    'h2': ('font-size': $bonsai-h2-font-size, 'line-height': $bonsai-h2-line-height, 'margin-bottom': $bonsai-h2-margin-bottom),
    'h3': ('font-size': $bonsai-h3-font-size, 'line-height': $bonsai-h3-line-height, 'margin-bottom': $bonsai-h3-margin-bottom),
    'h4': ('font-size': $bonsai-h4-font-size, 'line-height': $bonsai-h4-line-height, 'margin-bottom': $bonsai-h4-margin-bottom),
  ),
);

/* body text */

/// Default bottom margin of paragraphs.
/// @type Number
$bonsai-paragraph-margin-bottom: rem-calc($bonsai-spacing-base * 6) !default;

/// Default weight for body text
/// @type Number
$default-body-weight: normal !default;

/// Default style for body text
/// @type Number
$default-body-style: normal !default;

/* --  Foundation Configuration -- */
$header-font-weight: $bonsai-heading-font-weight;
$p-font-size: $bonsai-global-font-size;
$p-line-height: unitless-calc($p-font-size + 10, $p-font-size);
$paragraph-margin-bottom: $bonsai-paragraph-margin-bottom;

/* -- Mixins -- */

/// Transform text to ALL CAPS
@mixin upper {
  text-transform: uppercase !important;
}

/// TRANSFORM TEXT TO lowercase
@mixin lower {
  text-transform: lowercase !important;
}

/// Transform text to have Every Word Capitalized
@mixin capitalize {
  text-transform: capitalize !important;
}

/// Increase font-weight to bold
@mixin bold {
  font-weight: bold !important;
}

/// Set font-style to italic
@mixin italic {
  font-style: italic !important;
}

/// Decrease font-size to $bonsai-small-font-size
@mixin small {
  font-size: $bonsai-small-font-size !important;
}

/// Apply alternative font styles to heading text
@mixin large-heading-font {
  font-family: $bonsai-heading-font-family;
}

/// Set font-size, line-height, and margin-bottom to mock h1 styling
@mixin xlarge-heading {
  @include large-heading-font;

  font-size: $bonsai-h1-font-size;
  line-height: $bonsai-h1-line-height;
  margin-bottom: $bonsai-h1-margin-bottom;
}

/// Set font-size, line-height, and margin-bottom to mock h2 styling
@mixin large-heading {
  @include bold;

  font-size: $bonsai-h2-font-size;
  font-family: $bonsai-body-font-family;
  line-height: $bonsai-h2-line-height;
  margin-bottom: $bonsai-h2-margin-bottom;
}

/// Set font-size, line-height, and margin-bottom to mock h3 styling
@mixin medium-heading {
  font-size: $bonsai-h3-font-size;
  line-height: $bonsai-h3-line-height;
  margin-bottom: $bonsai-h3-margin-bottom;
  font-family: $bonsai-body-font-family;
}

/// Set font-size, line-height, and margin-bottom to mock h4 styling
@mixin small-heading {
  font-size: $bonsai-h4-font-size;
  line-height: $bonsai-h4-line-height;
  margin-bottom: $bonsai-h4-margin-bottom;
  font-family: $bonsai-body-font-family;
}

/// Apply font family/size, weight, line-height and margin-bottom defaults
@mixin body-font {
  font-size: $bonsai-global-font-size;
  line-height: $bonsai-global-lineheight;
  font-family: $bonsai-body-font-family;
  font-weight: normal;
  margin-bottom: 0;
}

/// Apply font-size and line-height values to 'p's
@mixin paragraph-styling {
  font-size: $p-font-size;
  line-height: $p-line-height;
}

/// Remove text-decoration
@mixin no-underline {
  text-decoration: none !important;
}

/// Apply styling to citations to adjust display and ::before content, inheriting else
@mixin citation-styling {
  font-size: inherit;
  display: inline;
  color: inherit;

  &::before {
    content: "";
  }
}

/// Applies general 'typography' styles to relevant children elements
@mixin typography {
  @if $bonsai-include-typography {
    @include foundation-typography;

    .upper {
      @include upper;
    }

    .lower {
      @include lower;
    }

    .capitalize {
      @include capitalize;
    }

    .bold {
      @include bold;
    }

    .italic {
      @include italic;
    }

    .normal-weight {
      font-weight: $default-body-weight !important;
    }

    .normal-style {
      font-style: $default-body-style !important;
    }

    .body-font {
      @include body-font;
    }

    h1,
    .xlarge-heading {
      @include xlarge-heading;
    }

    h2,
    .large-heading {
      @include large-heading;
    }

    h3,
    .medium-heading {
      @include bold;
      @include medium-heading;
    }

    h4,
    .small-heading {
      @include bold;
      @include small-heading;
    }

    p {
      @include paragraph-styling;
    }

    .small-text {
      @include small;
    }

    cite {
      @include citation-styling;
    }
  }
}