/**
 * Mixins
 */

@mixin htags( $factor: 1 ) {
    h1, h2, h3, h4, h5, h6 {
        font-family: $htag_family;
        line-height: $htag_lineheight;
        font-weight: $htag_weight;
    }
    @for $i from 1 through 6 {
        h#{$i} {
            $value: nth($htag_sizes, $i);
            $size: if( ($value * $factor) < 1, 1, $value * $factor );
            font-size: $size * 1em;
            margin: ( nth($htag_vmargins, $i) * 1em ) 0;
        }
    }
    /* Set H1 widget titles default size */
    .widget-title {
        $default: nth($htag_sizes, 4);
        $size: if( ($default * $factor) < 1, 1, $default * $factor );
        font-size: $size * 1em * 0.9;
    }
    .site-title {
        $default: nth($htag_sizes, 3);
        $size: if( ($default * $factor) < 1, 1, $default * $factor );
        font-size: $size * 1em * 0.9;
        font-weight: bold;
        line-height: 4.375rem;
        text-transform: uppercase;
        margin-top: 0;
        &:hover {
            text-shadow: $color__box-shadow;
        }
    }
}

// Mixins to apply coloring
@mixin guide() { /* Originally used as a guide, but this is the color I want for these items */
    background: #ffffff;
}

@mixin body() {
    body {
        background-color: $color__background-body;
    }
}

@mixin header_image() {
    #header-image {
        overflow: hidden;
        position: relative;
        height: 600px;
        img {
        
        }
        .site-branding-header {
            position: absolute;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        &.frontpage-portfolio .site-branding-header {
            position: relative;
            margin: 100px auto;
            left: auto;
            transform: none;
            .site-title {
                font-size: 110*$px!important;
                &:after {
                    bottom: 30px!important;
                }
            }
        }
        a {
            color: white;
        }
        .site-title,
        .site-description {
            color: white;
            font-weight: normal;
            text-transform: capitalize;
        }
        .site-title {
            font-size: 110*$px;
            margin: 0;
            font-weight: 100;
            text-shadow: $color__site-title-shadow;
            &:after {
                content: "";
                position: absolute;
                width: 84px;
                height: 2px;
                left: calc( 50% - 42px );
                bottom: 11px;
                background: linear-gradient( to right, rgba( 0, 113, 117, 0.3), rgba( 0, 143, 135, 0.45 ));
                box-shadow: 0 1px 0 rgba( 181, 243, 241, 0.07 );
            }
        }
        .site-description {
            display: block;
            font-size: 20*$px;
            line-height: 1.3;
            width: 380px;
            margin: 0.7em auto 1.35em;
            text-shadow: $color__site-title-shadow;
        }
    }
    .single #header-image,
    .archive #header-image,
    .search #header-image,
    .error404 #header-image,
    .page #header-image {
        max-height: 300px;
        .site-title {
            font-size: 60*$px;
        }
    }
    .page-template-frontpage-portfolio #header-image {
        height: auto;
        max-height: 100vh;
        .site-title {
            font-size: 110*$px;
        }
    }
}

@mixin custom_logo() {
    .custom-logo-link {
        float: left; 
    }
    .custom-logo {
        max-height: 40px;
        max-width: 100%;
        width: auto;
        margin-right: 1rem;
        display: inline-block;
    }
}

@mixin search_toggle() {
    .search-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 4rem;
        height: 4.375rem;
        padding: 25px;
        color: $color__text-sub-panel;
        text-align: center;
        cursor: pointer;
        line-height: 1;
        z-index: 3;
        .fa-search {
            position: relative;
            top: 2px;
        }
    }
    .search-toggle:hover,
    .search-toggle.active {
        background: $color__background-main-panel;
    }
    .main-navigation ul {
        padding-right: 4rem;
    }
}

@mixin buttons() {
    button,
    .button,
    .submit,
    .reset,
    input[type="button"], 
    input[type="reset"], 
    input[type="submit"],
    #infinite-handle span {
        box-shadow: none;
        line-height: inherit;
        font-size: inherit;
        padding: 10px 20px 5px!important;
        border: 1px solid rgba(26,53,71,0.11);
        border-top-color: rgba(26,53,71,0.2);
        border-radius: 5px;
        font-weight: 600;
        font-size: 20*$px;
        color: $color__text-main;
        box-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(26,53,71,.015), inset 0 1px 0 #fff;
        background: $color__background-button;
        background-origin: border-box;
        &:hover, &:focus, &:active {
            background: $color__background-button-hover;
            color: $color__link;
        }
    }
}

@mixin labels() {
    .label {
        background: $color__entry-highlight;
        border-radius: 3px;
        padding: 0.3333rem 0.5rem 0;
    }
}

@mixin topbutton() {
    .topbutton {
        height: 50*$px;
        width: 50*$px;
        position: fixed;
        right: 20*$px;
        bottom: 20*$px;
        z-index: 2;
        font-family: "FontAwesome";
        color: white;
        background: $color__link;
        display: none;
        font-size: 24*$px;
        opacity: 1;
    }
    .topbutton:hover {
        opacity: 0.5;
        color: white;
    }
    .topbutton:before {
        content: "\f106";
        display: block;
        text-align: center;
        padding-top: 5px;
    }
}

@mixin links() {
    a {
        text-decoration: none;
        border-bottom: 1px dotted transparent;
    }
    a:hover, a:active {
        
    }
}

@mixin lead_in() {
    .lead-in {
        font-size: 24*$px;
    }
    .lead-in p:first-child:first-letter {
        float: left;
        color: $color__link;
        font-size: 3.3rem;
        padding-right: 6px;
        line-height: 1.1;
    }
}

@mixin blockquote() {
    blockquote {
        padding: $default_gutter / 2 $default_gutter;
        margin: $default_gutter $default_gutter / 2;
        font-size: 24*$px;
        font-weight: 300;
        background-color: inherit;
        border-left: 6*$px solid $color__light-border;
        color: $color__text-sub-panel;
        
        a, a:visited, a:active {
            color: inherit;
        }
        cite {
            font-weight: 300;
            font-size: 18*$px;
            text-align: right;
            margin-left: 25%;
            margin-top: $default_gutter;
        }
        &.alignright {
            width: 50%;
            float: right;
            padding: 1em 2em 0 0;
            margin-left: 2em;
            border-left: none;
            border-right: 6*$px solid $color__light-border;
        }
        &.alignright cite {
            margin-left: 0;
            margin-right: 25%;
            text-align: left;
        }
        &.alignleft {
            width: 50%;
            float: left;
            padding: 1em 0 0 2em;
            margin-right: 2em;
        }
    }
}

@mixin main_panel() {
    background-color: $color__background-main-panel;
    border: 1*$px solid $color__border-main-panel;
    box-shadow: $color__box-shadow;
    position: relative;
}

@mixin sub_panel() {
    background-color: $color__background-sub-panel;
    border: 1*$px solid $color__border-sub-panel;
    box-shadow: inset $color__box-shadow;
    color: $color__text-sub-panel;
    a, a:visited, a:active {
        color: inherit;
    }
}

@mixin widget-divider() {
    border-bottom: 1px solid $color__light-border;
}
@mixin widget-divider-top() {
    border-top: 1px solid $color__light-border;
}

@mixin entry_meta() {
    background-color: transparent;
    color: $color__text-sub-panel;
    border-top: 1px solid $color__light-border;
    border-bottom: 1px solid $color__light-border;
    a, a:visited, a:active {
        color: inherit;
    }
    a:hover, a:active {
        
    }
}
@mixin content_link() {
    a, a:link, a:visited {
       position: relative;
        &:after {
            border-bottom: 1px solid #00acdf;
            position: absolute;
            display: block;
            content: '';
            width: 100%;
            bottom: 3px;
            left: 0;
        }
    }
    a:hover, a:active {
        background-color: $color__background-sub-panel;
    }
}
@mixin img_caption() {
    color: $color__text-sub-panel;
    background: $color__background-sub-panel;
}

@mixin entry_footer() {
    color: #9e9e9e;
    border-bottom: none;
    span {
        border-top: none;
    }
    a {
        color: inherit;
        font-weight: 400;
    }
}
@mixin comment() {

}
@mixin sticky_post() {
    border-top: 1*$px solid $color__link;
    border-bottom: 5*$px solid $color__link;
    position: relative;
}
@mixin more_link() {
    background: none;
    border: 1px solid $color__light-border;
    color: $color__text-sub-panel;
}
@mixin site_footer() {
    a {
        color: darken($color__link, 5%);
    }
}

// Menu styling

@mixin child_menu_expanded() {
    background-color: darken(saturate($color__background-sub-panel, 5%), 1%);
    border: 1*$px solid $color__border-sub-panel;
    border-bottom: 0;
    box-shadow: $color__box-shadow;
}

@mixin child_menu_item() {
    a, a:link, a:visited {
        border: 0;
        border-top: 1*$px solid darken($color__border-sub-panel, 2%);
    }
    a:hover {
        background-color: lighten(saturate($color__background-sub-panel, 3%), 0.25%);
    }
}

@mixin compact_menu_item() {
    border-top: 1*$px solid $color__border-sub-panel;
    &:hover {
        border-bottom-color: transparent;
        background-color: darken(saturate($color__background-sub-panel, 5%), 1%);
    }
}

@mixin child_menu_compact() {
    background-color: darken(saturate($color__background-sub-panel, 7%), 2%);
}

@mixin child_menu_compact_item() {
    border-top: 1*$px solid darkent($color__border-sub-panel, 2%);
    &:hover {
        border-bottom-color: transparent;
        background-color: darken(saturate($color__background-sub-panel, 8%), 3%);
    }
}

@mixin archive_item() {
    .content .archive {
        padding: 2rem 0;
    }
    .archive-item {
        transition: all 0.5s ease-in;
        float: left;
        position: relative;
        .index-post-thumbnail {
            height: 340px;
            overflow: hidden;
            background: white;
            img {
                height: 100%;
            }
        }
        .hentry {
            position: relative;
            height: 340px;
            overflow: hidden;
            padding: 0;
            background-size: cover!important;
            background-position: 50% 50%!important;
            background-repeat: no-repeat!important;
                -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
                -moz-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
                -ms-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
                box-shadow: 0 0 13px rgba(0, 0, 0, .07); 
            border: 1px solid $color__light-border;
            .entry-title {
                font-size: 30*$px;
                text-align: center;
            }
        }
        .post-content {
            transition: all 0.3s ease-in;
            background: white;
            padding: 2rem;
            margin: 0;
            height: 340px;
            width: 100%;
            position: absolute;
            &.post-thumbnail {
                top: 100%;
            }
            &:before {
                content:'';
                width:100%;
                height:60%;    
                position:absolute;
                left:0;
                bottom:0;
                background:linear-gradient(transparent 10%, white 70%);
            }
            .continue-reading {
                bottom: $default_gutter;
            }
        }
        .entry-footer {
                position: absolute;
                width: 100%;
                background: white;
                bottom: 0;
                padding: $default_gutter / 2 $default_gutter;
                span {
                    margin: 0;
                    padding: 0;
                }
                span::after {
                    content: '\22c5';
                    margin-right: 0.5em;
                    margin-left: 0.5em;
                }
                .cat-links a {
                    font-weight: 600;
                }
                .cat-links::after,
                .cat-links::before {
                    content: '';
                    margin: 0;
                }
        }
        .continue-reading {
            bottom: $default_gutter!important;
        }
        .sharedaddy {
            display: none;
        }
    }
    .archive-item:hover {
        .post-content {
            top: 0;
        }
        .continue-reading-arrow {
            background: $color__link!important;
        }
    }
}

@mixin testimonial() {
    .archive-testimonials {
        margin-bottom: $default_gutter * 1.5;
        border-top: 1px solid $color__link;
        .testimonial-thumbnail {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            float: left;
            margin-right: $post_r_padding;
            margin-left: -$default_gutter;
            margin-top: $default_gutter / 2;
            background-size: cover!important;
            box-shadow: $color__box-shadow;
        }
    }
    .archive-testimonial {
        .entry-title {
            font-size: 24*$px;
            font-weight: 600;
            color: $color__text-sub-panel;
            margin-bottom: 0;
        }
        .entry-content {
            margin-top: 0;
        }
    }
    .jetpack-testimonial {
        padding-bottom: $post_b_padding;
        padding-top: $post_t_padding!important;
        border-top: 1px solid $color__lighter-border;
        border-bottom: 1px solid white;
        margin-bottom: 0!important;
        .entry-content {
            margin-top: 0;
            font-style: italic;
            position: relative;
            z-index: 1;
        }
        .entry-content:before {
            font-family: "Dashicons";
            content: '\f122';
            font-size: 48*$px;
            color: $color__light-border;
            position: absolute;
            top: -10px;
            left: -50px;
            z-index: -1;
        }
    }
    .even {
        background: $color__background-sub-panel;
    }
    .single-jetpack-testimonial {
        .hentry {
            border-top: 1px solid $color__link;
        }
        .author-avatar {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            border-radius: 50%;
        }
        .author-title {
            margin: -$default_gutter / 5 0 0;
            text-align: center;
            position: relative;
            span {
                padding-right: 0;
                background: white;
                padding: 0 1rem;
                z-index: 3;
                position: relative;
            }
            &:after {
                content: "";
                position: absolute;
                width: 100%;
                border-bottom: 1px solid gainsboro;
                left: 0;
                top: 10px;
                z-index: 2;
            }
        }
        .testimonial-footer {
            text-align: center;
        }
        .show-hide-author {
            text-align: center;
            margin: 1rem 0 0;
            a {
                border: 0;
                color: white;
            }
        }
    }
}