// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@mixin shadow-big-color($color){
  // new box shadow optimized for Tablets and Phones
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14),
  0 7px 10px -5px rgba($color, 0.4)
}
@import "default/bs_nav_tabs";
@import "default/variables";

$brand-primary: #9c27b0;
$brand-default: #cecece;
$border-radius-base: 3px;
$padding-base:              15px;
$mdb-btn-font-size-base: 12px;
$gray-color:  #999999;

.vue-tabs {
  .nav-tabs {
    background: $brand-primary;
    border: 0;
    border-radius: $border-radius-base;
    padding: 0 $padding-base;

    > li {
      > a {
        color: #FFFFFF;
        border: 0;
        margin: 0;

        border-radius: $border-radius-base;

        line-height: $mdb-btn-font-size-base * 2;
        text-transform: uppercase;
        font-size: $mdb-btn-font-size-base;

        &:hover {
          background-color: transparent;
          border: 0;
        }
      }
      & > a,
      & > a:hover,
      & > a:focus {
        background-color: transparent;
        border: 0 !important;
        color: #FFFFFF !important;
        font-weight: $font-weight-bold;
      }
      i{
        font-size: 20px;
      }
      &.disabled > a,
      &.disabled > a:hover {
        color: rgba(255,255,255,0.5);
      }

      .material-icons{
        margin: -1px 5px 0 0;
      }
    }

    >li.active{
      & > a,
      & > a:hover,
      & > a:focus {
        background-color: rgba(255,255,255, .2);
        transition: background-color .1s .2s;
      }
    }

  }

  .nav-pills{

    .section-dark &,
    .section-image &{
      > li > a{
        color: $gray-color;
      }
      > li{
        > a:hover,
        > a:focus{
          background-color: #EEEEEE;
        }
      }
    }

    > li {
      > a{
        line-height: $mdb-btn-font-size-base * 2;
        text-transform: uppercase;
        font-size: $mdb-btn-font-size-base;
        font-weight: $font-weight-bold;
        min-width: 100px;
        text-align: center;
        color: $gray;
        transition: all .3s;

        &:hover{
          background-color: rgba(200, 200, 200, 0.2);
        }
      }

      i{
        font-size: 20px;
      }

      &.active > a{
        &,
        &:focus,
        &:hover{
          background-color: $brand-primary;
          color: $white-color;
          @include shadow-big-color($brand-primary);
        }
      }

    }

    &:not(.nav-pills-icons){
      > li > a{
        border-radius: $border-radius-extreme;
      }
    }

    &.nav-stacked{
      > li + li{
        margin: 10px 0;
      }
    }

  }
  .tab-content{
    padding-left: 20px;
    padding-top:10px;
  }

}