/* 
    Front-end css
    Author     : vutuansw
*/

$primary_color:#007acc;


.widz_tabbed_widget{

    &{
        border: none;
    }

    .widz_tabbed{
        &{
            border-width: 1px;
            border-style: solid;
            border-color: rgba(40, 44, 42, 0.1);
        }
        &__nav{
            &{
                position: relative;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: -moz-flex;
                display: -ms-flex;
                display: flex;
                margin: 0 auto;
                padding: 0;
                max-width: 1200px;
                list-style: none;
                -ms-box-orient: horizontal;
                -ms-box-pack: center;
                -webkit-flex-flow: row wrap;
                -moz-flex-flow: row wrap;
                -ms-flex-flow: row wrap;
                flex-flow: row wrap;
                -webkit-justify-content: center;
                -moz-justify-content: center;
                -ms-justify-content: center;
                justify-content: center;
            }

            li{
                &{
                    position: relative;
                    z-index: 1;
                    display: block;
                    margin: 0;
                    padding:0;
                    text-align: center;
                    -webkit-flex: 1;
                    -moz-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    top: -1px;
                    border-bottom: 1px solid;
                    border-left: 1px solid;
                    border-color: rgba(40, 44, 42, 0.1);
                    border-top: none;
                    border-right: none;
                }
                &:first-child{
                    border-left: none;
                }

                a{
                    &{
                        position: relative;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        line-height: 2.5;
                        padding: 1em 0 1em;
                        background-color: rgba(40,44,42,0.05);
                        line-height: 1;
                        -webkit-transition: color 0.2s;
                        transition: color 0.2s;
                        outline: none;
                        box-shadow: none
                    }
                    &:hover,&:active,&:focus{
                        color: $primary_color;
                        box-shadow: none
                    }
                }

                &:not(.active){
                    a{
                        color: #777;
                    }
                }

                &.active{
                    &{
                        border-top-width: 0;
                        border-bottom: none;
                    }
                    a{
                        background: none;
                        box-shadow: inset 0 3px 0 $primary_color;
                    }
                }
            }
        }

        &__content{
            .widget{
                border: none;
                margin: 0;
                padding: 0;
            }
            .tab-pane{
                &{
                    display: none;
                    padding: 15px;
                }
                &.active{
                    display: block;
                }
            }
        }
    }


}