/*————————————

Tabs v6

————————————*/ @media (min-width: $g-md) {

[class*="u-nav-v6"] {
  & .nav-link {
    position: relative;
    border-bottom: {
      style: solid;
      width: 2px;
      color: transparent;
    }
    transition: none;

    &:after,
    &:before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    &:after {
      border-top-color: $g-bg-color-main;
      border-width: 4px;
      margin-left: -4px;
    }
    &:before {
      border-width: 6px;
      margin-left: -6px;
    }
  }

  & .nav-link.active {
    border-color: $g-color-primary;

    &::after,
    &::before {
      opacity: 1;
    }

    &::before {
      border-top-color: $g-color-primary;
    }
  }

  &.u-nav-light {
    & .nav-link {
      color: $g-color-white;

      &::after {
        border-top-color: $g-color-gray-dark-v2;
      }
    }

    & .nav-link.active {
      color: $g-color-white;
      border-color: $g-color-white;

      &:before {
        border-top-color: $g-color-white;
      }

      &::after {
        border-top-color: $g-color-gray-dark-v2;
      }
    }
  }

  &.flex-column {
    & .nav-link {
      border-bottom: none;
      border-right: {
        style: solid;
        width: 2px;
        color: transparent;
      }

      &:after,
      &:before {
        top: 50%;
        left: auto;
      }
      &:after {
        border-top-color: transparent;
        border-left-color: $g-bg-color-main;
        border-width: 4px;
        margin-left: 0;
        margin-top: -5px;
        right: -8px;
      }
      &:before {
        border-top-color: transparent;
        border-left-color: $g-color-white;
        border-width: 6px;
        margin-left: 0;
        margin-top: -7px;
        right: -13px;
      }
    }

    & .nav-link.active {
      border-color: $g-color-primary;

      &::before {
        border-left-color: $g-color-primary;
      }
    }
  }
}

}