/**
 * Editor styles for the admin
 */

@import "https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";

// Variables
$bg-body: #f9f9f9;
$red: #ee4d4d;
$blue: #2b2e48;
$primary-color: $red;
$secondary-color: $blue;

// Typography
$base-font: helvetica, arial, tahoma, verdana;
$base-font-title: "Dosis", arial, tahoma, verdana;

$base-font-color: #726f77;

// Timeline
$timeline-color: $primary-color;


.tb-advanced-typography{
    box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);
    border: 1px solid #e2e4e7;
    background: #fff;
    padding: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    &:before{
        border: 8px solid #e2e4e7;
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        line-height: 0;
        top: -8px;
        right: 5%;
        border-bottom-style: solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-top: none;
        margin-left: -10px;
    }
}
.tb-divider{
    border:1px solid #f6f6f6;
}
button.components-button.tb-size-btn.tb-typography-control-btn.is-button.is-default.is-small {
    margin: 0;
    float: right;
}
.tb-typography-option-actions .tb-typography-reset-btn{
    background: none;
    border: none;
    box-shadow: none;
    float: right;
}
.tb-typography-option-actions button svg{
    height: 13px;
    width: 13px;
    fill:#777;
}
.tb-typography-option-actions button.tb-typography-reset-btn svg{
    height: 13px;
    width: 13px;
    fill: #777;
 }

.tb-clearfix{
    clear:both;
}


%clearfix {
    &:after, &:before {
        content: '';
        display: block;
        width: 100%;
        clear: both;
    }
}

@mixin prefix($prop, $val) {
    @each $prefix in '-webkit-', '-moz-', '-ms-', '' {
        #{$prefix}#{$prop}: $val;
    }
}
*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.tb-timeline-template1 {
    width: 100%;
    margin: 30px auto;
    position: relative;
    padding: 0 10px;
    @include prefix(transition, all .4s ease);

    &:before {
        content:"";
        width: 3px;
        height: 100%;
        background: $timeline-color;
        left: 50%;
        top: 0;
        position: absolute;
    }

    &:after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
    }

    .tb-blogpost-excerpt {
        .tb-button-view{
        margin-bottom: 20px;
       }
    }
    
    .tb-timeline-item {
        margin-bottom: 50px;
        position: relative;
        @extend %clearfix;

        .timeline-icon {
            background: $timeline-color;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 50%;
            overflow: hidden;
            margin-left: -23px;
            @include prefix(border-radius, 50%);

            svg {
                position: relative;
                top: 14px;
                left: 14px;
            }
        }

        .tb-timeline-content {
            width: 45%;
            background: #fff;
            /*padding: 20px;*/
            @include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1));
            @include prefix(border-radius, 5px);
            @include prefix(transition, all .3s ease);

            .tb-timeline-title {
                display: block;
                padding: 15px;
                margin-bottom: 10px;
                background: $timeline-color;
                color: #ffffff;
                /*margin: -20px -20px 0 -20px;*/
                font-weight: 300;
                @include prefix(border-radius, 3px 3px 0 0);
            }
            &:nth-child( odd ){
                &:before {
                    content: '';
                    position: absolute;
                    left: 45%;
                    top: 4%;
                    width: 0; 
                    height: 0; 
                    border-top: 7px solid transparent;
                    border-bottom: 7px solid transparent; 
                    border-left:7px solid $timeline-color; 
                }
            }
            .tb-timeline-second-content-wrap{
                .tb-timeline-byline{
                    .tb-timeline-text{
                        .tb-timeline-bototm-wrap{
                            .tb-timeline-tags-wrap{
                                .tb-timeline-post-tags{
                                        float:left;
                                        text-align: left;
                                    a{
                                        font-size: 12px;
                                        color: #666;
                                        font-weight: 500;
                                        box-shadow: none;
                                        display: inline-block;
                                        vertical-align: top;
                                        font-family: 'Lato', sans-serif;
                                    }
                                }
                            }
                            .tb-timeline-social-wrap{
                                float:right;
                                .social-share-data{
                                    a{
                                        color: #797979;
                                        font-size: 14px;
                                        width: 30px;
                                        display: inline-block;
                                        vertical-align: middle;
                                        text-align: center;
                                    }
                                }
                            }
                        }
                    }
                }
                .tb-timeline-metadatabox{
                    div{
                        display: inline-block;
                        padding: 0 16px;
                        font-size: 14px;
                    }
                }
            }
        }
        &:nth-child( even ) {
                .tb-timeline-content{
                    float: right;

                &:before {
                        content: '';
                        top: 7%;
                        right: 45%;
                        left: inherit;
                        border-left: 0;
                        border-right: 7px solid $timeline-color;
                    }
                }
            } 
    }
    @media screen and (max-width: 768px) {
        .tb-timeline {
            margin: 30px;
            padding: 0px;
            width: 90%;
            &:before {
                left: 0;
            }

            .tb-timeline-item {
                .tb-timeline-content {
                    width: 90%;
                    float: right;

                    &:before, &.right:before {
                        left: 10%;
                        margin-left: -6px;
                        border-left: 0;
                        border-right: 7px solid $timeline-color;
                    }
                }

                .tb-timeline-icon {
                    left: 0;
                }
            }
        }
    } 
}

.tb-timeline-template2 {
    width: 100%;
    margin: 30px auto;
    position: relative;
    padding: 0 10px;
    @include prefix(transition, all .4s ease);

    &:before {
        content:"";
        width: 3px;
        height: 100%;
        background: $timeline-color;
        left: 50%;
        top: 0;
        position: absolute;
    }

    &:after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
    }

    .tb-blogpost-excerpt {
        .tb-button-view{
        margin-bottom: 20px;
       }
    }

    .tb-timeline-item {
        margin-bottom: 50px;
        position: relative;
        @extend %clearfix;
        .timeline-icon {
            background: $timeline-color;
            width: 50px;
            height: 50px;
            position: relative;
            top: 0;
            left: 50%;
            overflow: hidden;
            margin-left: -23px;
            @include prefix(border-radius, 50%);

            svg {
                position: absolute;
                top: 14px;
                left: 14px;
            }
        }

        .tb-timeline-content {
            width: 45%;
            background: #fff;
            /*padding: 20px;*/
            @include prefix(box-shadow, 0px 2px 8px 2px rgba(0, 0, 0, 0.1));
            @include prefix(border-radius, 5px);
            @include prefix(transition, all .3s ease);
                    .tb-inline{
                            display: inline-block;
                            padding: 10px;
                            font-size: 14px;
                    }
            .tb-blogpost-title-wrap {
                a{
                    color:#333;
                    text-align: left;
                }
                a,div{
                    display: inline-block;
                }
                .mdate{
                    text-align: right;
                    padding-left: 15px;
                }
            }

           .tb-timeline-second-content-wrap{
                .tb-timeline-byline{
                    .tb-timeline-text{
                        .tb-timeline-bototm-wrap{
                            .tb-timeline-tags-wrap{
                                .tb-timeline-post-tags{
                                        float:left;
                                        text-align: left;
                                    a{
                                        font-size: 12px;
                                        color: #666;
                                        font-weight: 500;
                                        box-shadow: none;
                                        display: inline-block;
                                        vertical-align: top;
                                        font-family: 'Lato', sans-serif;
                                    }
                                }
                            }
                            .tb-timeline-social-wrap{
                                float:right;
                                .social-share-data{
                                    a{
                                        color: #797979;
                                        font-size: 14px;
                                        width: 30px;
                                        display: inline-block;
                                        vertical-align: middle;
                                        text-align: center;
                                    }
                                }
                            }
                        }
                    }
                }
                .tb-timeline-metadatabox{
                    .tb-timeline-excerpt{
                        display: inline-block;
                        padding: 0 16px;
                        font-size: 14px;
                    }
                }
            }
        }
        &:nth-child(even) {
                .tb-timeline-content{
                    float: right;
                }
            } 
    }
    @media screen and (max-width: 768px) {
        .tb-timeline {
            margin: 30px;
            padding: 0px;
            width: 90%;
            &:before {
                left: 0;
            }

            .tb-timeline-item {
                .tb-timeline-content {
                    width: 90%;
                    float: right;

                    &:before, &.right:before {
                        left: 10%;
                        margin-left: -6px;
                        border-left: 0;
                        border-right: 7px solid $timeline-color;
                    }
                }

                .tb-timeline-icon {
                    left: 0;
                }
            }
        }
    } 
}