/*--------------------------------------------------
    [Timeline Current Date]
----------------------------------------------------*/

.timeline-v1-current-date {
    padding-top: 100px;

    .timeline-v1-current-day {
        @include font($size: $font-size-30, $weight: $font-weight-400);
        color: $color-base;
        margin: 0;
    }

    .timeline-v1-current-time {
        display: block;
        @include font($size: $font-size-11, $weight: $font-weight-400);
        color: $color-base;
    }
}


/*--------------------------------------------------
    [Timeline v1]
----------------------------------------------------*/

.timeline-v1 {
    position: relative;
    list-style: none;
    padding: 10px 0 0;

    &:before {
        @include position(absolute, $top: 0, $left: 20px, $bottom: 0);
        width: 1px;
        background: darken($color-sky-light, 5%);
        content: " ";
    }

    .timeline-v1-list-item {
        position: relative;
        padding-left: 40px;
        margin-bottom: 15px;
        @include clearfix;

        .color-one { border-color: $color-base; }
        .color-two { border-color: $color-purple; }
        .color-three { border-color: $color-blue; }
        .color-four { border-color: $color-green; }
        .color-five { border-color: $color-blue-grey; }
        .color-six { border-color: $color-gold; }
        .color-seven { border-color: $color-red; }

        .timeline-v1-badge-icon {
            @include position(absolute, $top: 5px, $left: 15.5px);
            display: block;
            @include size(10px);
            background: $color-white;
            border-style: solid;
            border-width: 2px;
        }

        .timeline-v1-news-label {
            @include font($size: $font-size-13, $weight: $font-weight-400);
            color: $color-red-light;
            padding-right: 15px;
        }

        .timeline-v1-news-time {
            @include font($size: $font-size-12);
            color: darken($color-subtitle, 4%);
        }

        .timeline-v1-news-title {
            @include font($size: $font-size-13, $weight: $font-weight-400);
            color: darken($color-subtitle, 15%);
            letter-spacing: 0;
            text-transform: inherit;
            margin: 0;

            > a {
                @include font($size: $font-size-13);
                color: darken($color-subtitle, 15%);

                &:hover {
                    color: $color-base;
                    text-decoration: none;
                }
            }
        }
    }
}


/*--------------------------------------------------
    [Timeline v2]
----------------------------------------------------*/

.timeline-v2 {
    position: relative;
    list-style: none;
    overflow: hidden;
    padding: 10px 0 0;

    &:before {
        @include position(absolute, $top: 0, $left: 20px, $bottom: 0);
        width: 1px;
        background: darken($color-sky-light, 5%);
        content: " ";
    }

    .timeline-v2-list-item {
        position: relative;
        padding-left: 45px;
        margin-bottom: 25px;
        @include clearfix;
    }

    .timeline-v2-current-date {
        position: relative;
        border-top: 1px solid darken($color-sky-light, 5%);
        padding: 15px 0 0 40px;
        margin: 20px 0 25px;
        @include clearfix;
    }

    .timeline-v2-badge-icon {
        @include position(absolute, $top: 0, $left: 5px);
        display: block;
        @include size(30px);
        @include font($size: $font-size-13);
        color: lighten($color-grey, 2%);
        background: $color-white;
        text-align: center;
        padding: 8px;
    }

    .timeline-v2-news-date {
        display: block;
        @include font($size: $font-size-13, $weight: $font-weight-400);
        color: $color-red-light;
    }

    .timeline-v2-news-title {
        @include font($size: $font-size-12, $weight: $font-weight-400);
        color: darken($color-subtitle, 15%);
        letter-spacing: 0;
        text-transform: inherit;
        margin: 0;

        > a {
            @include font($size: $font-size-13);
            color: darken($color-subtitle, 15%);

            &:hover {
                color: $color-base;
                text-decoration: none;
            }
        }
    }

    .timeline-v2-current-day {
        @include font($size: $font-size-26, $weight: $font-weight-400);
        color: $color-base;
        margin: 0;
    }

    .timeline-v2-current-time {
        display: block;
        @include font($size: $font-size-12, $weight: $font-weight-400);
        color: $color-base;
    }
}


/*--------------------------------------------------
    [Timeline v3]
----------------------------------------------------*/

.timeline-v3 {
    position: relative;
    list-style: none;
    padding: 20px 0 20px;

    &:before {
        @include position(absolute, $top: 0, $left: 50%, $bottom: 0);
        width: 2px;
        background: lighten($color-dark-light, 20%);
        margin-left: -1px;
        content: " ";
    }

    .timeline-v3-list-item {
        position: relative;
        width: 50%;
        float: left;
        clear: left;
        padding-right: 30px;
        margin-top: 50px;
        @include clearfix;

        &:first-child {
            margin-top: 0;
        }

        &:nth-child(2) {
            margin-top: 50px;
        }

        .timeline-v3-badge-icon {
            @include position(absolute, $top: 25px, $right: 0);
            display: block;
            @include size(12px);
            background: $color-base;
            border: 2px solid $color-white;
            margin-right: -6px;
        }

        .timeline-v3-badge {
            position: relative;

            &:before {
                @include position(absolute, $top: 30px, $right: -23px);
                width: 19px;
                border-top: 2px dotted lighten($color-dark-light, 25%);
                content: " ";
            }
        }
    }

    .timeline-v3-right-wing {
        float: right;
        clear: right;
        padding: 0 0 0 30px;

        .timeline-v3-badge-icon {
            left: 0;
            right: auto;
            margin-left: -6px;
        }

        .timeline-v3-badge {
            &:before {
                @include position(absolute, $top: 31px, $left: auto, $right: 100.4%);
            }
        }

        .timeline-v3-panel {
            float: right;
        }
    }

    .timeline-v3-panel {
        float: left;
        width: 100%;
    }
}

/* Media Queries below 768px */
@media (max-width: $screen-sm-min) {
    .timeline-v3 {
        &:before {
            left: 15px;
        }

        .timeline-v3-list-item {
            position: relative;
            width: 100%;
            float: left;
            clear: left;
            padding: 0 0 0 50px;

            .timeline-v3-badge-icon {
                @include position(absolute, $top: 25px, $left: 9px, $right: auto);
            }

            .timeline-v3-badge {
                &:before {
                    @include position(absolute, $top: 30px, $left: -24px, $right: auto);
                }
            }
        }

        .timeline-v3-right-wing {
            padding: 0 0 0 50px;

            .timeline-v3-badge-icon {
                margin-left: 0;
            }
        }
    }
}


/*--------------------------------------------------
    [Timeline v4]
----------------------------------------------------*/

.timeline-v4 {
    position: relative;
    list-style: none;
    padding: 20px 0 20px;

    &:before {
        @include position(absolute, $top: 0, $left: 50%, $bottom: 0);
        width: 2px;
        background: $color-base;
        margin-left: -1px;
        content: " ";
    }

    &:after {
        @include position(absolute, $top: 0, $left: 50%);
        @include size(30px);
        display: inline-block;
        @include font($size: $font-size-18, $family: $font-family-font-awesome);
        background: $color-base;
        border-radius: 50%;
        content: "\f107";
        color: $color-white;
        line-height: .8;
        padding: 9px;
        margin-left: -15px;
    }

    .timeline-v4-list-item {
        position: relative;
        width: 50%;
        float: left;
        clear: left;
        padding-right: 50px;
        margin-top: 50px;
        @include clearfix;

        &:first-child {
            margin-top: 0;
        }

        &:nth-child(2) {
            margin-top: 50px;
        }

        .timeline-v4-badge-icon {
            @include position(absolute, $top: 59px, $right: 0);
            display: block;
            @include size(15px);
            background: $color-base;
            border: 2px solid $color-white;
            margin-right: -7.5px;
        }
    }

    .timeline-v4-right-wing {
        float: right;
        clear: right;
        padding: 0 0 0 50px;

        .timeline-v4-badge-icon {
            left: 0;
            right: auto;
            margin-left: -7.5px;
        }

        .timeline-v4-badge {
            &:before {
                @include position(absolute, $top: 31px, $left: auto, $right: 100.4%);
            }
        }

        .timeline-v4-panel {
            float: right;

            &.timeline-v4-panel-right {
                position: relative;
                
                &:before {
                    @include position(absolute, $top: 50px, $right: 100%);
                    @include size(0);
                    border-style: solid;
                    border-width: 15px 20px 15px 0;
                    border-color: transparent $color-white transparent transparent;
                    content: " ";
                    margin-right: -3px;
                }
            }
        }
    }

    .timeline-v4-panel {
        float: left;
        width: 100%;
        background: $color-white;
        padding: 20px;

        &.timeline-v4-panel-left {
            position: relative;

            &:after {
                @include position(absolute, $top: 50px, $left: 100%);
                @include size(0);
                border-style: solid;
                border-width: 15px 0 15px 20px;
                border-color: transparent transparent transparent $color-white;
                content: " ";
                margin-left: -3px;
            }
        }
    }

    .timeline-v4-subtitle {
        display: block;
        @include font($size: $font-size-16, $style: italic, $family: $font-family-droid);
        color: $color-base;
        margin-bottom: 5px;
    }

    .timeline-v4-title {
        @include font($size: $font-size-24);

        .timeline-v4-title-link {
            @include font($size: $font-size-24);
        }
    }
}

/* Media Queries below 768px */
@media (max-width: $screen-sm-min) {
    .timeline-v4 {
        &:before {
            left: 15px;
        }

        &:after {
            left: 15px;
        }

        .timeline-v4-list-item {
            position: relative;
            width: 100%;
            float: left;
            clear: left;
            padding: 0 0 0 50px;

            .timeline-v4-badge-icon {
                @include position(absolute, $top: 59px, $left: 8px, $right: auto);
            }

            .timeline-v4-badge {
                &:before {
                    @include position(absolute, $top: 30px, $left: -24px, $right: auto);
                }
            }
        }

        .timeline-v4-right-wing {
            .timeline-v4-badge-icon {
                margin-left: 0;
            }
        }
        
        .timeline-v4-panel {
            &.timeline-v4-panel-left {
                &:after {
                    @include position(absolute, $top: 50px, $left: auto, $right: 100%);
                    border-width: 15px 20px 15px 0;
                    border-color: transparent $color-white transparent transparent;
                    margin-left: -3px;
                }
            }
        }
    }
}