// ==========================================================================
// Elements / Document
// ==========================================================================

//
// Simple page-level setup.
//
// 1. Includes fonts
// 2. Ensure the page always fills at least the entire height of the viewport.
// 3. Set the default `font-size` and `line-height` for the entire project,
//    sourced from our default variables.

@include font-faces($font-faces, $font-dir); // [1]

html {
    min-height: 100%; // [2]
    line-height: $line-height; // [3]
    font-family: ff("sans");
    color: $font-color;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    @media (max-width: $to-small) {
        font-size: $font-size - 2px;
    }

    @media (min-width: $from-small) and (max-width: $to-medium) {
        font-size: $font-size - 2px;
    }

    @media (min-width: $from-medium) and (max-width: $to-large) {
        font-size: $font-size - 1px;
    }

    @media (min-width: $from-large) and (max-width: $to-huge) {
        font-size: $font-size; // [1]
    }

    @media (min-width: $from-huge) and (max-width: $to-gigantic) {
        font-size: $font-size + 1px;
    }

    @media (min-width: $from-gigantic) and (max-width: $to-colossal) {
        font-size: $font-size + 2px;
    }

    @media (min-width: $from-colossal) {
        font-size: $font-size + 4px;
    }

    &.is-loading {
        cursor: wait;
    }
}

body {
}

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

a {
    color: $color-link;

    @include u-hocus {
        color: $color-link-hover;
    }
}

/* Define a transition duration during page visits */
html.is-changing .transition-fade {
    transition: opacity 0.1s;
    opacity: 1;
}
/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
    opacity: 0;
}

#paginated.is-changing {
    transition: opacity 250ms;
}
#paginated.is-animating {
    opacity: 0;
}

#modal.is-changing {
    transition: opacity 100ms;
}
#modal.is-animating {
    opacity: 0;
}
