.gf-tabs {
  @include clearfix();
  float: left;
  position: relative;
  top: 1px;
}

.gf-tabs-item {
  float: left;
  list-style: none;
}

.gf-tabs-link {
  padding: $tabs-padding;
  margin-right: calc($spacer/2);
  position: relative;
  display: block;
  border: solid transparent;
  border-width: 0 1px 1px;
  border-radius: 3px 3px 0 0;
  color: $text-color;

  i {
    margin-right: 5px;
  }

  .gicon {
    position: relative;
    top: -2px;
  }

  &:hover,
  &:focus {
    color: $link-hover-color;
  }

  &.active,
  &.active:hover,
  &.active:focus {
    border-color: $orange $tab-border-color transparent;
    background: $page-bg;
    color: $link-color;
    overflow: hidden;

    &::before {
      display: block;
      content: ' ';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      top: 0;
      background-image: $brand-gradient-horizontal;
    }
  }

  &.active--panel {
    background: $panel-bg !important;
  }
}