//
// Component: Base
//
// ========================================================================


// Variables
// ========================================================================

@base-body-background:                          @global-background;
@base-body-font-family:                         @global-body-font-family;
@base-body-font-weight:                         @global-body-font-weight;
@base-body-font-size:                           @global-font-size;
@base-body-line-height:                         @global-line-height;
@base-body-color:                               @global-color;

@base-link-color:                               @global-link-color;
@base-link-hover-color:                         @global-link-hover-color;

@base-selection-background:                     fade(@global-primary-background, 75%);
@base-selection-color:                          @global-contrast-color;

@base-margin-vertical:                          @global-margin;

@base-heading-font-weight:                      @global-heading-font-weight;
@base-heading-font-family:                      @global-heading-font-family;
@base-heading-color:                            @global-heading-color;
@base-heading-margin-top:                       @global-margin-large;
@base-heading-text-transform:                   none;
@base-h1-font-size:                             48px;
@base-h1-line-height:                           58px;
@base-h2-font-size:                             38px;
@base-h2-line-height:                           48px;
@base-h3-font-size:                             36px;
@base-h3-line-height:                           46px;
@base-h4-font-size:                             32px;
@base-h4-line-height:                           42px;
@base-h5-font-size:                             24px;
@base-h5-line-height:                           34px;
@base-h6-font-size:                             18px;
@base-h6-line-height:                           28px;

@base-hr-border:                                @global-border;

@base-blockquote-border:                        @global-primary-light-background;
@base-blockquote-font-size:                     22px;
@base-blockquote-line-height:                   32px;

@base-code-color:                               @global-primary-background;
@base-code-font-size:                           @global-font-size;

@base-pre-background:                           @global-secondary-background;
@base-pre-color:                                #afd9f6;
@base-pre-font-size:                            @global-font-size;
@base-pre-line-height:                          round((@base-pre-font-size * 1.85));
@base-blockquote-small-color:                   @global-muted-color;


// Body
// ========================================================================

.hook-base-body() {}


// Code and preformatted text
// ========================================================================

.hook-base-code() {
    i { font-style: normal; }
}

.hook-base-code-reset() {}

.hook-base-pre() { 
    padding: 20px;
    border: 1px solid @global-dark-075-shadow;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: inset 4px 0 @global-dark-075-shadow;

    i { font-style: normal; }
}


// Miscellaneous
// ========================================================================

.hook-base-misc() {

    h1,h2,h3,h4,h5,h6 {
        letter-spacing: @global-heading-letter-space;

        > a, > a:hover {
            text-decoration: none;
        }
    }

    em {
        color: @global-color;
    }

    blockquote {
    	font-family: @global-italic-font-family;
		font-style: italic;
        padding-left: 15px;
        position: relative;
        margin: 0;
        
        > p {
            line-height: 42px;
            font-weight: 300;
            letter-spacing: @global-heading-letter-space;
            font-size: @base-h4-font-size;
        
            strong {
                font-weight: normal;
                color: @global-primary-background;
            }
        }
        
        small { color: @base-blockquote-small-color; }

        .author,
        .jobtitle{
            font-weight: @global-heading-font-weight;
            line-height: round((@global-line-height*1.2));
            display: block;
        }

        .author {
        	font-size: @base-h2-font-size;
            font-family: @global-italic-font-family;
            margin-top: 15px; 
            
            &:empty {
                display: none;
            }
        }

        .jobtitle {
            font-size: @base-h4-font-size;
        }
    }

    .tm-quote {
        line-height: @base-blockquote-line-height;
    }

    // testimonials
    .tm-testimonial-avatar {
        box-shadow: 0 0 0 4px @global-background, 0 3px 4px 1px @global-primary-background;
        border-radius: 50%;
    }

    .tm-testimonial {
        strong {
            font-weight: @global-heading-font-weight;
            color: @global-primary-background;
        }
    }

    .quote-icon {
        font-size: @base-h1-font-size*3;
        position: absolute;
        left: 100px;
        bottom: @global-grid-gutter;
        color: fade(@global-color, 5%);
    }

    @media (max-width: @breakpoint-medium) {
        blockquote p {
            font-size: 20px;
            line-height: 2;
        }
    }

    abbr[title] {
        text-decoration: none;
    }

    // hr

    hr { 
        border-color: fade(@global-color, 15%); 
        border-style: dotted;
    }
    .tooltip hr { display: none; }
    
}