/*------------------------------------
  Tabs v4
------------------------------------*/

@media (min-width: $g-md) {
  .u-nav-v4-1 {
    border-bottom: {
      style: solid;
      width: 1px;
      color: $g-color-gray-light-v4;
    }

    & .nav-item {
      margin-bottom: -1px;
    }

    & .nav-link {
      border: {
        style: solid;
        width: 2px 1px 1px;
        color: transparent;
      }
    }

    & .nav-link.active {
      border-color: $g-color-gray-light-v2 $g-color-gray-light-v4 $g-color-white;
    }

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

      & .nav-link.active {
        color: $g-color-white;
        border-color: $g-color-gray-light-v2 $g-color-gray-light-v4 transparent;
        background-color: $g-color-gray-dark-v2;
      }

      &.flex-column {
        & .nav-link.active {
          border-color: $g-color-gray-light-v2 transparent $g-color-gray-light-v2 $g-color-gray-light-v4;
          border-width: 1px 0 1px 1px;
          background-color: $g-color-gray-dark-v2;
        }
      }
    }

    &.u-nav-primary .nav-link.active {
      border-color: $g-color-primary $g-color-gray-light-v4 $g-color-white;
    }

    &.u-nav-dark .nav-link.active {
      border-color: $g-color-gray-dark-v2 $g-color-gray-light-v4 $g-color-white;
    }
  }
  @media (min-width: $g-md) {
    .u-nav-v4-1-column {
      display: flex;

      .u-nav-v4-1 {
        border-bottom: none;

        & .nav-item {
          margin: 0 -1px 0 0;
          z-index: 2;
        }

        & .nav-link {
          border: {
            style: solid;
            width: 1px 1px 1px 2px;
            color: transparent;
          }
        }

        & .nav-link.active {
          border-color: $g-color-gray-light-v4 $g-color-white $g-color-gray-light-v4 $g-color-gray-light-v2;
        }

        &.u-nav-primary .nav-link.active {
          border-color: $g-color-gray-light-v4 $g-color-white $g-color-gray-light-v4 $g-color-primary;
        }

        &.u-nav-dark .nav-link.active {
          border-color: $g-color-gray-light-v4 $g-color-white $g-color-gray-light-v4 $g-color-gray-dark-v2;
        }
      }

      & .nav {
        width: 30%;
      }
      & .tab-content {
        width: 70%;
      }
    }
  }
}