.nav-tabs.navbar-top.tab-group {
  border: $default-border;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  > li.nav-item {
    flex: 1;
    margin-bottom: 0;

    > a.nav-link {
      align-items: center;
      border: 0;
      border-bottom: $tab-group-bottom-border-placeholder;
      border-radius: 0;
      color: $tab-group-text-color;
      display: flex;
      flex-direction: column;
      font-weight: $tab-group-font-weight;
      height: 100%;
      justify-content: flex-end;
      margin-bottom: 0;
      margin-right: 0;
      padding-bottom: $padding-s;
      padding-left: 0;
      padding-right: 0;

      &:focus {
        background: $tabs-focus-background-color;
        border: 0;
        border-bottom: $tabs-bottom-border-size solid $tabs-hover-bottom-border-color;
        box-shadow: $outline-box-shadow rgba($tabs-hover-bottom-border-color, $outline-border-opacity);
        outline: none;
      }

      &.icon-only {
        justify-content: center;

        .tab-icon {
          flex-grow: 0;

          .embla-icon {
            height: $tab-group-icon-only-icon-size;
            width: $tab-group-icon-only-icon-size;
          }
        }
      }

      &.text-only {
        justify-content: center;

        .tab-title {
          flex-grow: 0;
          padding: 0 $padding-xs;
          text-align: center;
          word-break: break-word;
        }
      }

      .tab-icon {
        display: block;
        flex-grow: 1;

        .embla-icon {
          color: $tab-group-text-color;
          fill: $tab-group-text-color;
        }
      }

      .tab-title {
        flex-grow: 1;
        padding: 0 $padding-xs;
        text-align: center;
        word-break: break-word;
      }

      &:hover {
        background: $tabs-hover-background-color;
        border: 0;
        border-bottom: $tabs-bottom-border-size solid $tabs-hover-bottom-border-color;
      }

      &.active:hover,
      &.active:focus,
      &.active {
        background: $tabs-active-background-color;
        border-bottom: $tabs-bottom-border-size solid $tabs-active-bottom-border-color;
        border-left: $default-border;
        border-right: $default-border;
        border-top: 0;
        color: $tabs-active-text-color;

        .tab-icon {
          .embla-icon {
            color: $tabs-active-text-color;
            fill: $tabs-active-text-color;
          }
        }
      }

      &:first-of-type {
        a {
          border-right: $default-border;
        }
      }

      &:last-of-type {
        a {
          border-left: $default-border;
        }
      }

      &:not(:first-of-type):not(:last-of-type) {
        a {
          border-left: $default-border;
          border-right: $default-border;
        }
      }
    }
  }
}