/**
  * PWS Tabs jQuery Plugin
  * Author: Alex Chizhov
  * Author Website: http://alexchizhov.com/pwstabs
  * GitHub: https://github.com/alexchizhovcom/pwstabs
  * Version: 1.4.0
  * Version from: 06.03.2016
  * Licensed under the MIT license
  */


@import 'crosass/crosass_init';


$pws_tabs_bgcolor_default : #9bd7d5;
$pws_tabs_bgcolor_hover : #70c5c2;
$pws_tabs_bgcolor_active : #fff;

.pws_tabs_container,
.pws_tabs_controll a{
    font-size:16px;
}

@media only screen and (max-width: 60em){ // 960px

                                          .pws_tabs_container.pws_tabs_responsive{
                                              width: 100% !important;
                                              ul.pws_tabs_controll{
                                                  width: 100%;
                                                  li{
                                                      vertical-align: top;
                                                      text-align: center;
                                                      a{
                                                          margin: 0;
                                                          font-size: 1em;
                                                          line-height: 1.125em;
                                                          overflow: hidden;
                                                          i{
                                                              display: block;
                                                              margin: 0 0 5px 0;
                                                          }
                                                      }
                                                  }
                                              } // EOF : pws_tabs_controll


                                              // ######################################################
                                              // Vertical Position
                                              // ######################################################
                                              &.pws_tabs_vertical{
                                                  display: block;
                                                  position: relative;
                                                  &:after{
                                                      @include clear;
                                                  }

                                                  ul.pws_tabs_controll{
                                                      width: 100%;
                                                      position: relative;
                                                      float: none;
                                                      li{
                                                          display: inline-block;
                                                          a {
                                                              margin: 0;
                                                          }
                                                      }
                                                  }

                                                  .pws_tabs_list{
                                                      position: relative;
                                                      float: none;
                                                  }

                                              } // EOF: pws_tabs_vertical


                                          } // EOF: pws_tabs_responsive

} // 960px

@media only screen and (max-width: 37.5em){ // 600px

                                            .pws_tabs_container.pws_tabs_responsive{
                                                width: 100% !important;
                                                position: relative;
                                                .pws_responsive_small_menu{
                                                    width: 100%;
                                                    height: 40px;
                                                    background-color: #{$pws_tabs_bgcolor_default};
                                                    display: block;
                                                    a{
                                                        width: 40px;
                                                        height: 40px;
                                                        display: block;
                                                        overflow: hidden;
                                                        color: #fff;
                                                        font-size: 32px;
                                                        font-size: 2em;
                                                        text-align: center;
                                                        padding: 3px 0 0 0;
                                                        cursor:pointer;
                                                        @include boxsizing('border-box');
                                                        &:hover{
                                                            background-color: #{$pws_tabs_bgcolor_hover};
                                                        }
                                                    }
                                                } // EOF : pws_responsive_small_menu

                                                ul.pws_tabs_controll.pws_tabs_menu_popup{
                                                    display: none;
                                                    position: absolute;
                                                    overflow: hidden;
                                                    top: 40px;
                                                    left: 0;
                                                    z-index: 99;
                                                    margin: 0;
                                                    padding: 0;
                                                    @include boxsizing('border-box');
                                                    
                                                    &.show{
                                                        display:block;
                                                    }
                                                    
                                                    li{
                                                        display: block;
                                                        float: none;
                                                        a i{
                                                            display: inline-block;
                                                            margin: 0 3px 0 0;
                                                            margin: 0 0.1875em 0 0;
                                                        }
                                                    }
                                                } // EOF : pws_tabs_menu_popup



                                                &.pws_tabs_rtl ul.pws_tabs_controll.pws_tabs_menu_popup li a i{
                                                    display: inline-block;
                                                    margin: 0 0 0 3px;
                                                    margin: 0 0 0 0.1875em;
                                                }

                                            } // EOF: pws_tabs_responsive

} // 600px


.pws_tabs_container{
    width: 100%;
    box-sizing:border-box;

    ul.pws_tabs_controll{
        list-style: none;
        margin: 0;
        padding:0;
        li{
            display: inline-block;
            a{
                display: block;
                background-color: #{$pws_tabs_bgcolor_default}; // 1.2.1
                padding: 15px 20px;
                padding: 0.9375em 1.25em; // @1.2.0
                text-decoration: none;
                color: #fff;
                margin-right: 3px;
                cursor:pointer;
                &:hover{
                    background-color: #{$pws_tabs_bgcolor_hover};
                }
                i{
                    margin-right: 8px;
                }
                &.pws_tab_noname i{
                    margin-right: 0;
                    margin-left: 0;
                }
                &.pws_tab_active{
                    background-color: #{$pws_tabs_bgcolor_active};
                    color: #505050;
                }
            }
        }
    } // EOF : pws_tabs_controll

} // EOF : pws_tabs_container


.pws_tabs_list{
    display: block;
    background-color: #fff;
    height: auto;
    padding: 20px;
    padding: 1.25em; // @1.2.0
    @include boxsizing('border-box');
    @include transition('all','.3s','ease-in-out','.3s');
    overflow: hidden;
    position: relative;
}
.pws_tab_single{
    /*position: absolute;*/
    /*top: 20px;*/
    /*padding-right: 20px;*/
    /*padding-right: 1.25em; // @1.2.0*/

    display:block;

    @include transition('all','.3s','ease-in-out','.0');
}


/**
  * ######################################################
  * Right To Left Styles
  * ######################################################
  */
.pws_tabs_container.pws_tabs_rtl{
    text-align: right;
    direction: rtl;
    ul.pws_tabs_controll li a{
        margin-right: 0;
        margin-left: 3px;
        i{ // @1.2.0
           margin-left: 8px;
           margin-right: 0;
        }
    }
    .pws_tab_single{
        /*padding-right: 0;*/
        /*padding-left: 20px;*/
        /*padding-left: 1.25em; // @1.2.0*/
    }
} // EOF : pws_tabs_rtl


/**
  * ######################################################
  * Vertical Position
  * ######################################################
  */
.pws_tabs_container.pws_tabs_vertical{
    display: block;
    position: relative;

    &:after{
        @include clear;
    }

    & > ul.pws_tabs_controll{
        width: auto;
        position: relative;
        float: left;
        li{
            display: block;
            a{
                margin-right: 0;
                margin-left: 0;
                margin-bottom: 3px;
            }
        }
    }

    & > .pws_tabs_list{
        position: relative;
        float: left;
    }

} // EOF : pws_tabs_vertical


/**
  * ######################################################
  * Colors - Themes @1.2.0
  * ######################################################
  */

// PWS Tabs Flat Theme Colors
@mixin theme_flat($name,$defaultColor,$hoverColor, $activeColor){
    /**
    * ###########################
    * #{$name}
    * ###########################
    */
    .pws_tabs_container.pws_tabs_responsive.pws_theme_#{$name} .pws_responsive_small_menu{
        background-color: #{$defaultColor};
        a:hover{
            background-color: #{$hoverColor};
        }
    }
    .pws_tabs_container.pws_theme_#{$name} ul.pws_tabs_controll li a{
        background-color: #{$defaultColor};
        &:hover{
            background-color: #{$hoverColor};
        }
        &.pws_tab_active{
            background-color: #{$activeColor};
        }
    }
}


@include theme_flat('violet', '#c72c66','#a6164c','#fff');
@include theme_flat('green',  '#86c447','#539312','#fff');
@include theme_flat('yellow', '#fdb813','#ffa500','#fff');
@include theme_flat('gold',   '#f89827','#fa7b00','#fff');
@include theme_flat('orange', '#f15b42','#fd2e0b','#fff');
@include theme_flat('red',    '#e41937','#d70726','#fff');
@include theme_flat('purple', '#672e8d','#470871','#fff');
@include theme_flat('grey',   '#4d4d4f','#000000','#fff');




// PWS Themes Flat Dark
@mixin theme_flat_dark($name,$defaultColor,$hoverColor, $activeColor){
    /**
    * ###########################
    * #{$name}
    * ###########################
    */
    .pws_tabs_container.pws_tabs_responsive.pws_theme_dark_#{$name} .pws_responsive_small_menu{
        background-color: #{$defaultColor};
        a:hover{
            background-color: #{$hoverColor};
        }
    }
    .pws_tabs_container.pws_theme_dark_#{$name}{
        .pws_tabs_list{
            background-color: #{$activeColor}
        }
        ul.pws_tabs_controll li a{
            background-color: #{$defaultColor};
            &:hover{
                background-color: #{$hoverColor};
            }
            &.pws_tab_active{
                background-color: #{$activeColor};
            }
        }
    } 
}

@include theme_flat_dark('violet', '#c72c66','#a6164c','#fafafa');
@include theme_flat_dark('green',  '#86c447','#539312','#fafafa');
@include theme_flat_dark('yellow', '#fdb813','#ffa500','#fafafa');
@include theme_flat_dark('gold',   '#f89827','#fa7b00','#fafafa');
@include theme_flat_dark('orange', '#f15b42','#fd2e0b','#fafafa');
@include theme_flat_dark('red',    '#e41937','#d70726','#fafafa');
@include theme_flat_dark('purple', '#672e8d','#470871','#fafafa');
@include theme_flat_dark('grey',   '#4d4d4f','#000000','#fafafa');
@include theme_flat_dark('cyan',   '#9bd7d5','#70c5c2','#fafafa');




/**
  * ######################################################
  * Effect: none
  * ######################################################
  */
.pws_tabs_noeffect{
    .pws_tabs_list{
        @include transition('all','.1s','ease-in-out','0');
    }
    .pws_tab_single{
        @include transition_none;
    }
}

.pws_tabs_container.pws_none{
    .pws_hide{
        display: none;
    }
    .pws_show{
        display: block;
    }
}

/**
  * ######################################################
  * Effect: scale
  * ######################################################
  */
.pws_tabs_container.pws_scale{
    & > .pws_tabs_list{
        & > .pws_hide{
            @include opacity(0);
            @include transform('scale(0.9)');
            @include transition('all','.3s','ease-in-out','.3s');
        }
        & > .pws_show{
            z-index: 1;
            @include opacity(100);
            @include transform('scale(1)');
            @include transition_delay('.3s');
            @include transition('all','.3s','ease-in-out','.3s');
        }
    }
}

/**
  * ######################################################
  * Effect: slideleft
  * ######################################################
  */
.pws_tabs_container.pws_slideleft{
    & > .pws_tabs_list{
        & > .pws_hide{
            @include transform('translateX(-100%)');
            @include opacity(0);
            @include transition('all','.3s','ease-in-out','.3s');
        }
        & > .pws_show{
            @include transform('translateX(0px)');
            @include opacity(100);
            @include transition_delay('.3s');
            @include transition('all','.3s','ease-in-out','.3s');
        }
    }
}

/**
  * ######################################################
  * Effect: slideright
  * ######################################################
  */
.pws_tabs_container.pws_slideright{
    & > .pws_tabs_list{
        & > .pws_hide{
            @include transform('translateX(200%)');
            @include opacity(0);
            @include transition('all','.3s','ease-in-out','.3s');
        }
        & > .pws_show{
            @include transform('translateX(0px)');
            @include opacity(100);
            @include transition_delay('.3s');
            @include transition('all','.3s','ease-in-out','.3s');
        }
    }
}

/**
  * ######################################################
  * Effect: slidetop
  * ######################################################
  */
.pws_tabs_container.pws_slidetop{
    & > .pws_tabs_list{
        & > .pws_hide{
            @include transform('translateY(-100%)');
            @include opacity(0);
            @include transition('all','.3s','ease-in-out','.3s');
        }
        & > .pws_show{
            @include transform('translateY(0px)');
            @include opacity(100);
            @include transition_delay('.3s');
            @include transition('all','.3s','ease-in-out','.3s');
        }
    }
}

/**
  * ######################################################
  * Effect: slidedown
  * ######################################################
  */
.pws_tabs_container.pws_slidedown{
    & > .pws_tabs_list{
        & > .pws_hide{
            @include transform('translateY(200%)');
            @include opacity(0);
            @include transition('all','.3s','ease-in-out','.3s');
        }
        & > .pws_show{
            @include transform('translateY(0px)');
            @include opacity(100);
            @include transition_delay('.3s');
            @include transition('all','.3s','ease-in-out','.3s');
        }
    }
}