$typography-spacing: 2rem !default;
$content-width--full-width: none !default;

.u-container-width {
    max-width: $content-container-width;
}

.u-container-sides-spacing {
    @include spacing(padding-left, $content-sides-spacing);
    @include spacing(padding-right, $content-sides-spacing);
}

.mce-content-body {
    @include spacing(margin-left, $content-sides-spacing);
    @include spacing(margin-right, $content-sides-spacing);
}

.u-content-top-spacing {
    @include spacing(padding-top, $content-vertical-spacing);
}

.u-content-bottom-spacing {
    @include spacing(padding-bottom, $content-vertical-spacing);
}

.u-content-bottom-spacing + .u-content-top-spacing {
    padding-top: 0;
}

.u-content-background {
    background-color: $content-background-color;
}

#{$content-selector} {
    margin-right: auto;
    margin-left: auto;
    max-width: $content-width;

    @if ( $content-width--full-width != false ) {
        .full-width & {
            max-width: $content-width--full-width;
        }
    }
}

.site {
    border: 0 solid transparent;
}

@if ($content-border-width != 0) {
    .site {
        border-width: $content-border-width;
        border-color: $content-border-color;
    }
}

// just set the desired baseline unit here
// so we can use rem units to multiply it
html {
    font-size: percentage($baseline-unit/16px);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    @include leading-map($body-font);
    color: $body-text-color;
}

.h0 {
    @include leading-map($page-title-font);
    color: $page-title-color;
}

.h1, h1 {
    @include leading-map($h1);
    color: $h1-color;
}

.h2, h2 {
    @include leading-map($h2);
    color: $h2-color;
}

.h3, h3 {
    @include leading-map($h3);
    color: $h3-color;
}

.h4, h4 {
    @include leading-map($h4);
    color: $h4-color;
}

.h5, h5 {
    @include leading-map($h5);
    color: $h5-color;
}

.h6, h6 {
    @include leading-map($h6);
    color: $h6-color;
}

h1, h2, h3, h4, h5, h6 {
    & + &:not(:first-child) {
        margin-top: 0;
    }
}

p,
ul, ol, dl,
hr,
table,
.twocolumn {

    &:not(:last-child) {
        @include spacing(margin-bottom, $typography-spacing);
    }
}


blockquote {
    @include leading-map($blockquote-font);

    &:not(:last-child) {
        @include spacing(margin-bottom, 2rem);
    }

    footer, cite {
        display: block;
        @include spacing(margin-top, 2rem);

        font-style: normal;
        @include leading-map($cite-font);

        a {
            border-bottom: 0 !important;
            text-decoration: none !important;
        }
    }
}


// BLOG GRID
// ========================================

// Layout
// ----------------------------------------

$blog-grid-width: 1300px !default;
$blog-sides-spacing: 70px !default;

// Items Grid
$blog-grid-valid-layouts: regular mosaic packed masonry !default;
$blog-grid-layout: packed !default;
$blog-grid-packed-ratio: 2.275 !default;
$blog-grid-aspect-ratio: 1 !default;
$blog-grid-columns: 4 !default;
$blog-grid-vertical-spacing: 150px !default;
$blog-grid-horizontal-spacing: 40px !default;

// Title
$blog-content-position: below !default;
$blog-content-alignment: top left !default;
$blog-title-visibility: true !default;

// Excerpt
$blog-excerpt-visibility: true !default;

// Colors
// ----------------------------------------

$blog-card-title-color: #000000 !default;
$blog-primary-meta-color: #3B3B3B !default;
$blog-secondary-meta-color: #828282 !default;
$blog-thumbnail-background: #EEEEEE !default;
$blog-card-excerpt-color: #000000 !default;
$blog-card-footer-color: #000000 !default;

// Thumbnail hover
$blog-thumbnail-background-opacity: 0.5 !default;

// Fonts
// ----------------------------------------
$blog-card-title-font: () !default;
$blog-card-excerpt-font: () !default;
$blog-card-footer-font: () !default;
$blog-card-meta-primary-font: () !default;
$blog-card-meta-secondary-font: () !default;

// ========================================


.u-blog-grid-width {
    max-width: $blog-grid-width;
}

.u-blog-sides-spacing {
    @include spacing(padding-left, $blog-sides-spacing);
    @include spacing(padding-right, $blog-sides-spacing);
}

@if (null == index( $blog-grid-valid-layouts, $blog-grid-layout )) {
    @warn "$blog-grid-layout should be one of: #{$blog-grid-valid-layouts}";
    $blog-grid-layout: regular;
}

.c-gallery--blog {
    @include spacing(margin-top, -$blog-grid-vertical-spacing);
    @include spacing(margin-left, -$blog-grid-horizontal-spacing);

    > * {
        @include spacing(margin-top, $blog-grid-vertical-spacing);
        @include spacing(padding-left, $blog-grid-horizontal-spacing);
    }
}

.c-card__title {
    @include leading-map($blog-card-title-font);

    @if ($blog-card-title-color) {
        color: $blog-card-title-color;
    }
}

.c-meta__primary {
    @include leading-map($blog-card-meta-primary-font);

    @if ($blog-primary-meta-color) {
        color: $blog-primary-meta-color;
    }
}

.c-meta__secondary {
    @include leading-map($blog-card-meta-secondary-font);

    @if ($blog-primary-meta-color) {
        color: $blog-secondary-meta-color;
    }
}

.c-meta__separator {

    @if ($blog-primary-meta-color) {
        color: $blog-secondary-meta-color;
    }
}

.c-card__excerpt {
    @include leading-map($blog-card-excerpt-font);

    color: $blog-card-excerpt-color;
}

.c-card__footer {
    @include leading-map($blog-card-footer-font);

    color: $blog-card-footer-color;
}

.c-card__thumbnail-background {
    background-color: $blog-thumbnail-background;
}

.no-customify .c-gallery--blog {
    $blog-grid-columns-at-lap: if($blog-grid-columns >= 5, $blog-grid-columns - 1, $blog-grid-columns);
    $blog-grid-columns-at-small: if($blog-grid-columns-at-lap >= 4, $blog-grid-columns-at-lap - 1, $blog-grid-columns-at-lap);

    @if ($blog-title-visibility != true) {
        .c-card__title {
            display: none;
        }
    }

    @if ($blog-excerpt-visibility != true) {
        .c-card__excerpt {
            display: none;
        }
    }

    @if ($blog-content-position == above) {
        @include gallery-title-above;
    }

    @if ($blog-content-position == overlay) {
        @include gallery-title-overlay;
    }

    @if (packed == $blog-grid-layout) {
        $typeline-points: map-get(map-get($typeline-config, spacings), points);

        $normal: calc(#{percentage($blog-grid-packed-ratio / $blog-grid-columns)} - #{$blog-grid-vertical-spacing * $blog-grid-packed-ratio});
        $featured: calc(#{percentage(2 * $blog-grid-packed-ratio / $blog-grid-columns)} - #{$blog-grid-vertical-spacing * (2 * $blog-grid-packed-ratio - 1)});

        $factor-at-lap: ( getY( nth($typeline-points, 1), nth($typeline-points, 2), nth($typeline-points, 3), $blog-grid-vertical-spacing ) - 1 ) * 1 / 3 + 1;
        $value-at-lap: round($blog-grid-vertical-spacing / $factor-at-lap);
        $normal-at-lap: calc(#{percentage($blog-grid-packed-ratio / $blog-grid-columns-at-lap)} - #{$value-at-lap * $blog-grid-packed-ratio});
        $featured-at-lap: calc(#{percentage(2 * $blog-grid-packed-ratio / $blog-grid-columns-at-lap)} - #{$value-at-lap * (2 * $blog-grid-packed-ratio - 1)});

        $factor-at-small: ( getY( nth($typeline-points, 1), nth($typeline-points, 2), nth($typeline-points, 3), $blog-grid-vertical-spacing ) - 1 ) * 2 / 3 + 1;
        $value-at-small: round($blog-grid-vertical-spacing / $factor-at-small);
        $normal-at-small: calc(#{percentage($blog-grid-packed-ratio / $blog-grid-columns-at-small)} - #{$value-at-small * $blog-grid-packed-ratio});
        $featured-at-small: calc(#{percentage(2 * $blog-grid-packed-ratio / $blog-grid-columns-at-small)} - #{$value-at-small * (2 * $blog-grid-packed-ratio - 1)});

        @include gallery-cropped;
        @include gallery-packed;

        .c-gallery__item {

            @include above(small) {
                padding-top: $normal-at-small;
            }

            @include above(lap) {
                padding-top: $normal-at-lap;
            }

            @include above(desk) {
                padding-top: $normal;
            }
        }

        .c-card {
            @include spacing(left, $blog-grid-horizontal-spacing);
        }
    }

    @if (regular == $blog-grid-layout) {
        @include gallery-cropped;

        .c-card__frame {
            padding-top: percentage(1/$blog-grid-aspect-ratio);
        }
    }

    @if (mosaic == $blog-grid-layout) {
        @include gallery-cropped;
        @include gallery-mosaic;

        .c-card__frame {
            padding-top: percentage(1/$blog-grid-aspect-ratio);
        }
    }
}


// Extras
// ----------------------------------------
$text-selection-color: #FFFFFF !default;
$text-selection-background-color: #000000 !default;

::selection {
    background: $text-selection-background-color;
    color: $text-selection-color;
}

::-moz-selection {
    background: $text-selection-background-color;
    color: $text-selection-color;
}