@mixin tab-active-text {

color: #1d2638;
font-weight: 700;

} @mixin tab-active-border {

border-bottom-color: #3c4356;

} @mixin tab-focus-style {

&.js-current,
&:focus.js-current {
  @include tab-active-text;
  @include tab-active-border;
}

&:focus {
  @include tab-active-text;
  border-bottom-color: rgba(58, 151, 212, .8);
}

}

.tabbox {

position: relative;
.separator {
  margin: 14px 0;
}
.inline-separator {
  display: inline-block;
  width: 7px;
}
.js-slider {
  position: absolute;
  background-color: #858585;
  height: 2px;
  transition: all .3s;
}
&.tabbox-sm .tab-btn {
  font-size: 12px;
  padding: 6px 12px;
}
&.tabbox-lg .tab-btn {
  font-size: 14px;
  padding: 18px 50px;
}
.tab-btn {
  .icon-chevron-down {
    margin-left: 7px;
    font-size: 10px;
  }
  &:hover {
    .icon-chevron-down:before {
      color: #1d2638;
    }
  }
  background: #fff;
  padding: 12px 25px;
  font-size: 13px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #e3e8ee;
  outline: 0;
  transition: all .3s;
  &:hover {
    @include tab-active-text;
  }
  @include tab-focus-style;

  $tab-btn-borders: (
    (tab-btn-type0, rgba(109, 188, 128, .3)),
    (tab-btn-type1, rgba(1, 137, 114, .2)),
    (tab-btn-type2, rgba(0, 91, 74, .2)),
    (tab-btn-type3, rgba(93, 105, 227, .3)),
    (tab-btn-type4, rgba(205, 205, 205, 1)),
  );

  @each $classname, $border in $tab-btn-borders {
    &.#{$classname} {
      border-bottom-color: $border;
      @include tab-focus-style;
    }
  }
}

} .tabbox.tabbox-uno {

$tab-active-color: #6772e5;
.js-slider {
  background-color: $tab-active-color;
}
.tab-btn.js-current {
  color: $tab-active-color;
  font-weight: 700;
}

}