/**
  * 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: block;
      position: absolute;
      overflow: hidden;
      top: 40px;
      left: 0;
      z-index: 99;
      margin: 0;
      padding: 0;
      @include boxsizing('border-box');
      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_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_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_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_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_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');
    }
}