@import '../../helpers/_size.scss';
@import './theme.scss';

@import url('https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

/* FONT */

/* Constants */
$base-header-size: 1.25rem;
$header-size-diff: 0.25rem;
$header-size-diff-lg: 0.5rem;
$base-headline-size: 3.5rem;
$headline-size-diff: 1rem;
$font-weights: (
    'thin': 200,
    'light': 300,
    'normal': 400,
    'semibold': 600,
    'bold': 700,
);
$font-transformations: uppercase, lowercase, capitalize;

/* Headers */
@for $index from 1 through 6 {
    h#{$index} {
        $diff: $header-size-diff;
        $offset: 0;

        @if $index < 3 {
            $diff: $header-size-diff-lg;
            $offset: .75;
        }

        font-family: 'Montserrat', sans-serif;
        font-size: $base-header-size + $diff * (6 - $index) - $offset;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
}

h1 {
    letter-spacing: 0.025rem;
}

p,
article,
blockquote {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 1rem;
}

p.lead {
    font-size: 1.2rem;
}

blockquote {
    background-color: map-get($grays, '000');
    border-left: 5px solid map-get($grays, '200');
    border-radius: 3px;
    margin-bottom: 1rem;
    padding: 1rem 2rem;

    &.text--large {
        font-size: 1.15rem;
    }

    p {
        margin: 0;
    }
}

cite {
    opacity: 0.7;
}

mark,
.mark {
    padding: 0.2em;
    background-color: #f0e8c4;
}

/* Headlines (for larger titles) */
@for $index from 1 through 4 {
    .headline-#{$index} {
        font-size: $base-headline-size + $headline-size-diff * (4 - $index);
        letter-spacing: 0.05rem;
    }
}

.font-alt {
    font-family: 'Nunito Sans';
}

.content {
    @for $index from 1 through 6 {
        h#{$index} {
            line-height: 1.125em;
            margin: 1rem 0;
        }
    }
}

/* TODO: To deprecate */
.title {
    font-weight: bold;
}

.title:not(:last-child),
.subtitle:not(:last-child) {
    margin-bottom: 1rem;
}

.title + .subtitle {
    /* Make the subtitlte closer to the title */
    margin-top: -0.75rem;
}

/* Use default line-height for these texts and when line-height-inherit is specified */
.card-tile p,
.card-tile article,
.card-tile blockquote {
    line-height: inherit;
}

/* Weights */
@each $weight, $value in $font-weights {
    .font-#{$weight} {
        font-weight: $value;
    }
}

/* Text Transformations */
@each $transformation in $font-transformations {
    .#{$transformation} {
        text-transform: $transformation;
    }
}

.rtl {
    direction: rtl;
}

.white {
    color: #fff !important;
}

.faded {
    opacity: 0.75;
}

// Deprecating 0.6.2, use <i> or <em> instead
// .font-italic {
//     font-style: italic;
// }

/* Font Awesome */
.icon {
    /* Usually used in spans */
    display: inline-block;
    /* font-size: 21px; Allow font sizes for icons to be overwritten */
    /* line-height: 1.5rem; Allow line height to be inherited or overwritten */
    text-align: center;
    width: 1.5rem;
    vertical-align: baseline;

    &.x-small {
        margin: 0.55rem 0 0 0.1rem;
    }

    &.small {
        margin: 0.95rem 0 0 0.1rem;
    }

    .fa-wrapper {
        font-size: inherit;
    }
}

.info {
    display: block;
    font-size: var(--font-size-s);
    margin-top: 0.25rem;
    color: map-get($grays, '600');

    &.inline {
        /* Keeps the extra info inline */
        display: inline-block;
        margin-left: 0.5rem;
    }
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Other text elements */
abbr[title] {
    border-bottom: 0.1rem dotted;
    cursor: help;
    text-decoration: none;
}

kbd {
    background-color: var(--cirrus-fg);
    border-radius: 0.2rem;
    color: #fff;
    display: inline-block;
    line-height: 1;
    padding: 0.5rem;
    vertical-align: baseline;
}

/* MOBILE */

@include screen-below('xs') {
    $base-header-size: 1rem;
    $header-size-diff: 0.25rem;
    $base-headline-size: 2.5rem;
    $headline-size-diff: 0.25rem;

    @for $index from 1 through 6 {
        h#{$index} {
            font-size: $base-header-size + $header-size-diff * (6 - $index);
        }
    }

    @for $index from 1 through 4 {
        .headline-#{$index} {
            font-size: $base-headline-size + $headline-size-diff * (6 - $index);
        }
    }

    p,
    article,
    blockquote {
        margin: 1rem 0;
    }
}