//
// Calculations
//

// Font themes
$f-serif: "Georgia", serif;
$f-sans: "Arial", sans-serif;

$font-body: $f-serif;
$font-headings: $f-serif;

// Defaults
body,
html {

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    margin: 0;
    width: 100%;
    max-width: none;
  }

}

// Font defaults
html {
  font-size: #{$base-font-size + '%'};
  font-size: #{$base + 'px'};
  font-family: $f-serif;
  font-weight: 400;

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    font-size: #{$base-desktop + 'px'};
    font-size: #{$base-font-size-desktop / 100 + 'rem'};
  }

}

// Line-height & margin reset
* {
  @include line-height(1);

  @include breakpoint($bp-768) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @include line-height(1);
  }

}

// Paragraph

p {
  @include margin-bottom(1);
  //@include font-size(1.1);
}

@if $paragraph-indent == true {

  p + p {
    @include margin-top(-1);
    text-indent: #{ $leading + 'px'};
    text-indent: #{ $leading-rem + 'rem'};

    .floatLeft + p,
    .floatRight + p {

      @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
        $leading: $leading-desktop;
        $leading-rem: $leading-rem-desktop;

        text-indent: #{ $leading + 'px'};
        text-indent: #{ $leading-rem + 'rem'};
      }

    }

  }

  .attention-grabber + p {
    margin-top: 0;
    text-indent: 0;
  }
}

@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
  $leading: $leading-desktop;
  $leading-rem: $leading-rem-desktop;

  @import 'gutenberg-mixins';

  @if $paragraph-indent == true {

    p + p,
    .floatLeft + p,
    .floatRight + p {
      @include margin-top(-1);
    }

  }

}

//
// Headings
//

// Set headings sizes, line-heights and margins
@each $heading, $properties in $headings {
  #{$heading} {
    @include font-size(nth($properties, 1));
    @include line-height(nth($properties, 2));
    @include margin-top(nth($properties, 3));
    @include margin-bottom(nth($properties, 4));
  }
}

@media screen and (min-width: #{ $max-width + 5 + 'em'}) {
  $leading: $leading-desktop;
  $leading-rem: $leading-rem-desktop;

  @import 'gutenberg-mixins';

  @each $heading, $properties in $headings {
    #{$heading} {
      @include font-size(nth($properties, 1));
      @include line-height(nth($properties, 2));
      @include margin-top(nth($properties, 3));
      @include margin-bottom(nth($properties, 4));
    }
  }

}

// Set margins between headings
h1 + h2 {
  @include margin-top(1);

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include margin-top(1);
  }

}

h2 + h3,
h3 + h4,
h4 + h5 {
  @include margin-top(.5);

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include margin-top(.5);
  }

}

h5 + h6 {
  @include margin-top(-.5);

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include margin-top(-.5);
  }

}

// Change headings font if a heading font is set
@if $font-headings != null {
  h1,
  h2,
  h3,
  h4 {
    font-family: $f-serif;
    font-weight: normal;

    &.grid-title {
      margin: 0;
    }
  }
}

h5, h6 {
  text-transform: uppercase;
  font-family: $f-sans;
  font-weight: 700;
}

//
// Links (to be configured in _gutenberg-config.scss)
//

a {
  color: $color-link-normal;
  transition: color .3s;
  text-decoration: none;

  &:visited {
    color: $color-link-normal;
  }

  &:active {
    color: $color-link-active;
  }

  &:hover {
    color: $color-link-hover;

    &:visited {
      color: $color-link-hover;
    }
  }
}

//
// Figures & other elements
//

figure {
  margin: 0;
  display: inline-block;
}

figure.floatLeft,
figure.floatRight {

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    max-width: #{.5 * $max-width * $base-desktop + 'px'};
    max-width: #{.5 * $max-width + 'rem'};

    @if $paragraph-indent == true {
      @include padding-equal(1);
      @include margin-bottom(0);
    } @else {
      @include padding(0, 1);
    }

  }

  blockquote {

    @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
      $leading: $leading-desktop;
      $leading-rem: $leading-rem-desktop;

      @import 'gutenberg-mixins';

      @include padding-equal(0);
      text-align: left;

      @if $paragraph-indent == true {
        @include margin-top(1);
      }

    }

    p {

      @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
        $leading: $leading-desktop;
        $leading-rem: $leading-rem-desktop;

        @import 'gutenberg-mixins';

        @include font-size(1.2);
        @include line-height(1);
      }

    }

  }

}

figcaption {
  @include line-height(1);
  color: $color-font-figcaption;
  margin-bottom: 0;

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include line-height(1);
    margin-bottom: 0;
  }

}

blockquote {
  @include margin(1, 0);

  font-weight: 500;

  @include breakpoint($bp-1200) {
    @include margin(1, -2);
  }
}

cite {
  font-style: normal;
}

// Quotes
figure blockquote {
  @include padding(1, 0);

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include padding(2, 0, 1);
    text-align: center;
  }

  p {
    @include font-size(1.6875);
    @include line-height(1.5);

    @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
      $leading: $leading-desktop;
      $leading-rem: $leading-rem-desktop;

      @import 'gutenberg-mixins';

      @include font-size(1.6875);
      @include line-height(1.5);
    }

  }

}

// Lists
ul,
ol {
  li {
    margin-bottom: 0;
  }
}

// Horizontal rule
hr {
  @include margin-top($hr-margin);
  @include margin-bottom($hr-margin);
  border: 0;
  color: $hr-color;
  display: block;
  height: #{$leading + 'px'};
  height: #{$leading-rem + 'rem'};
  margin-right: auto;
  margin-left: auto;

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include margin-top($hr-margin);
    @include margin-bottom($hr-margin);
    height: #{$leading + 'px'};
    height: #{$leading-rem + 'rem'};
  }

  @if $hr-style == 'line' {
    background-size: 100% #{$leading + 'px'};
    background-size: 100% #{$leading-rem + 'rem'};
    background-image: linear-gradient(to bottom, transparent 1px, transparent #{ 0.5 * $leading - (0.5 * $hr-height) + 'px'}, $hr-color #{ 0.5 * $leading - (0.5 * $hr-height) + 'px'}, $hr-color #{ (0.5 * $leading  - (0.5 * $hr-height)) + $hr-height + 'px'}, transparent #{ (0.5 * $leading  - (0.5 * $hr-height)) + $hr-height + 'px'}, transparent #{$leading + 'px'});

    @if $hr-width == null {
      width: 100%;
    } @else {
      width: #{$hr-width + 'px'};
    }
  }

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;
    $hr-margin: $hr-margin-desktop;

    @import 'gutenberg-mixins';

    @if $hr-style == 'line' {
      background-size: 100% #{$leading + 'px'};
      background-size: 100% #{$leading-rem + 'rem'};
      background-image: linear-gradient(to bottom, transparent 1px, transparent #{ .5 * $leading - (.5 * $hr-height) + 'px'}, $hr-color #{ .5 * $leading - (.5 * $hr-height) + 'px'}, $hr-color #{ (.5 * $leading - (.5 * $hr-height)) + $hr-height + 'px'}, transparent #{ (.5 * $leading - (.5 * $hr-height)) + $hr-height + 'px'}, transparent #{$leading + 'px'});
    }

  }

  @if $hr-style == 'type' {
    text-align: center;

    &:before {
      content: $hr-type-content;
      letter-spacing: $hr-type-char-spacing;
    }
  }
}

small {
  @include line-height(.5);

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include line-height(.5);
  }

}

code {
  @include padding-equal(1);

  @media screen and (min-width: #{ $max-width + 5 + 'em'}) {
    $leading: $leading-desktop;
    $leading-rem: $leading-rem-desktop;

    @import 'gutenberg-mixins';

    @include padding-equal(1);
  }

}
