/*
 * Shortcode: Tabs.scss
 * -----------------------------------------------
*/


.tm-tabs {
  .nav-tabs {
    border-bottom: 0;
    .nav-link {
      position: relative;
      color: var(--theme-color1);
      text-align: center;
      padding: 14px 30px 11px;
      text-transform: uppercase;
      margin-bottom: 10px;
      margin-right: 10px;
      letter-spacing: 0.07em;
      font-size: 0.9rem;
      border-radius: 7px;
      transition: all 0.3s ease;
      z-index: 0;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: var(--theme-color1);
        border-radius: 7px;
        transition: all 0.3s ease;
        z-index: -1;
      }
      &.active {
        color: #fff;
        background-color: transparent;
        &:before {
          height: 100%;
        }
      }
    }
  }
  .tab-content {
    position: relative;
    padding-top: 20px;
  }
}




/* -------- Horizontal-Tab-Centered ---------- */
.horizontal-tab-centered {
  .nav-pills {
    display: inline-block;
    > li {

      > a {
        background: $gray-lighter;
        color: $black-555;
        font-size: 14px;
        padding: 8px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        text-transform: capitalize;
        &:hover {
          color: $white-base;
        }

        i {
          font-size: 14px;
          margin-right: 8px;
        }
      }     
      &.active > a, 
      &.active > a:hover, 
      &.active > a:focus {
        color: $white-base;
      }
    }
  }
}

/* -------- Horizontal-Tab Fullwide ---------- */
.horizontal-tab {
  &.fullwide {
    .nav-tabs {
      > li {
        width: 20%;
      }
    }
  }
}

/* -------- Vertical Nav-Tabs ---------- */
.vertical-tab {
  .tab-content {
    padding: 5px 5px 20px 20px;
    border: none;
  }
  .nav-tabs {
    > li {
      float: none;
      margin-bottom: 0;

      > a {
        background: none;
        border-radius: 0;
        border-bottom: 1px solid $gray-lightgray;
        border-right: 1px solid $gray-lightgray;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        font-size: 14px;
        padding: 30px 0 30px 15px;
      }

      &:first-child > a {
        border-top: 1px solid $gray-lightgray!important;
      }

      &.active > a, 
      &.active > a:hover, 
      &.active > a:focus {
        background: none;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 1px solid $gray-lightgray;
      }
    }
  }
  .small-padding {
    .nav-tabs {
      > li > {

        a {
          padding: 20px 0 20px 15px;
        }

        i {
          font-size: 24px;
        }
      }     
    }
  }
}


.custom-nav-tabs {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color;
  border-image: none;
  border-style: none solid none none;
  border-width: medium 0px medium medium;
  margin-right: 53px;
  > li {
    float: none;
    margin: 0 0 1px;

    a {
      background: $gray-lighter none repeat scroll 0 0;
      border: medium none;
      border-radius: 0;
      display: block;
      font-size: 17px;
      font-weight: 700;
      line-height: 59px;
      margin: 0;
      outline: medium none;
      padding: 0;
      text-align: center;
      text-transform: uppercase;
    }
  }
}
.custom-nav-tabs {
  > li {
    
    &.active > a,
    &.active > a:hover,
    &.active > a:focus,
    > a:hover,
    > a:focus {
      border: medium none;
      color: $black;
      padding: 0;
    }
  }
}