.uex-tab-group {
  width: 100%;

  .nav-scroller {
    position: relative;
    overflow: hidden;
    height: $uex-tabs-nav-height;

    .nav.nav-tabs {
      flex-wrap: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      margin-bottom: -15px;

      .nav-item {
        text-transform: uppercase;

        > .uex-button:not(.nav-link),
        > .uex-icon {
          vertical-align: middle;
          font-size: 2rem;
          margin: 0 .5rem 0 -.5rem;

          &[right] {
            margin: 0 -.5rem 0 .5rem;
          }
        }

        .nav-link {
          text-transform: uppercase;
          height: $uex-tabs-nav-height;
          padding: $nav-link-padding-y $nav-link-padding-x;
          color: $nav-tabs-link-color;
          background-color: $nav-tabs-link-bg;
          font-weight: normal;
          border-color: transparent;
          border-radius: 0;

          &.btn-icon-left {
            padding: $nav-link-padding-y $nav-link-padding-x $nav-link-padding-y $nav-link-padding-y;
          }

          &.btn-icon-right {
            padding: $nav-link-padding-y $nav-link-padding-y $nav-link-padding-y $nav-link-padding-x;
          }

          &.btn-icon-only {
            padding: $nav-link-padding-y;
          }

          @include media-breakpoint-down(sm) {
            padding: $nav-link-padding-sm-y $nav-link-padding-sm-x;

            &.btn-icon-left {
              padding: $nav-link-padding-sm-y $nav-link-padding-sm-x $nav-link-padding-sm-y $nav-link-padding-sm-y;
            }

            &.btn-icon-right {
              padding: $nav-link-padding-sm-y $nav-link-padding-sm-y $nav-link-padding-sm-y $nav-link-padding-sm-x;
            }

            &.btn-icon-only {
              padding: $nav-link-padding-sm-y;
            }
          }

          @include hover-focus {
            color: $nav-tabs-link-hover-color;
            background-color: $nav-tabs-link-hover-bg;
          }

          &.active {
            font-weight: $nav-tabs-link-active-font-weight;
          }

          &.nav-link-btn {
            @include border-highlight-active;

            &::after {
              background-color: $gray-300;
            }
          }

          @each $color, $value in $social-colors {
            &.nav-link-#{$color} {
              color: $value;
            }
          }

          @each $color, $value in $theme-colors {
            &.nav-link-#{$color} {
              color: $value;
            }
          }

          @each $color, $value in $colors {
            &.nav-link-#{$color} {
              color: $value;
            }
          }
        }
      }
    }

    &.has-controls {
      .nav.nav-tabs {
        &:after {
          position: relative;
          display: list-item;
          content: " ";
          width: 15px;
          flex: 0 0 15px;
        }
      }
    }
  }

  .tab-group-panel {
    > .uex-table {
      border: 0;
    }
  }
}