fleet/frontend/components/TabNav/_styles.scss

.tab-nav {
  top: 0;
  // No background color as TabNav is often over a background gradient

  .react-tabs {
    // Remove 12px top margin react-tab adds causing buggy 12px gap in all uses
    // TODO: Find upstream fix
    margin-top: -12px;

    &__tab-list {
      display: inline-flex;
      align-items: flex-start;
      gap: $pad-medium;
      border-bottom: none;
      width: 100%;
      height: 33px;
      margin: 0; // Override react-tab 10px bottom margin
      position: relative; // Required for shift left
    }

    &__tab {
      font-size: $x-small;
      border-radius: $border-radius-large;
      border: none;
      padding: 6px $pad-small;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      line-height: 21px;

      // Undoes blue native shadow
      &:focus {
        box-shadow: none;
        outline: 0;
      }

      &:hover {
        background-color: $ui-fleet-black-5;
      }

      // focus-visible only highlights when tabbing not clicking
      // outline instead of border prevents pixel shifts
      &:focus-visible {
        outline: 1px solid $core-focused-outline;
        outline-offset: -1px;
      }

      // // Bolding text when the button is active causes a layout shift
      // // so we add a hidden pseudo element with the same text string
      &:before {
        content: attr(data-text);
        height: 0;
        visibility: hidden;
        overflow: hidden;
        user-select: none;
        pointer-events: none;
        font-weight: $bold;
      }

      &--selected {
        font-weight: $bold;
        background-color: $ui-fleet-black-5;
      }

      &--disabled {
        cursor: not-allowed;
      }
    }

    &__tab-panel--selected {
      margin-top: $gap-page-component;

      .no-results-message {
        margin-top: $pad-xxlarge;
        font-size: $small;
        font-weight: $bold;

        span {
          margin-top: $pad-medium;
          font-size: $x-small;
          font-weight: $regular;
          display: block;
        }
      }
    }

    .tab-text {
      display: flex; /* Ensure text and count are aligned horizontally */
      align-items: center; /* Vertically align items */

      .tab-text__text {
        // Reserve space for bold text using a hidden pseudo-element
        &::before {
          content: attr(data-text); /* Same text as the visible one */
          font-weight: $bold; /* Mimic bold styling */
          visibility: hidden; /* Keep it invisible */
          position: absolute; /* Prevent it from affecting layout */
        }
      }
    }
  }

  // All secondary tab styling
  &--secondary {
    .react-tabs {
      &__tab-list {
        gap: $pad-xxlarge;
        border-bottom: 1px solid $ui-fleet-black-10;
        padding-bottom: 10px;
      }

      &__tab {
        padding: 5px 0 $pad-medium;

        &:hover {
          background-color: transparent;
        }

        // Aligns underline correctly when focused
        &:focus {
          &:after {
            left: 0;
            bottom: 0;
          }
        }

        &:focus-visible {
          outline: none; // Undo primary tabbing through app styling as it runs into edges

          .tab-text {
            outline: 1px solid $core-focused-outline;
            outline-offset: 3px;
            border-radius: $border-radius;
          }
        }

        &--selected {
          background-color: transparent;

          &::after {
            content: "";
            width: 100%;
            height: 0;
            border-bottom: 2px solid $core-fleet-black;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }

        &:hover {
          &::after {
            content: "";
            width: 100%;
            height: 0;
            border-bottom: 2px solid $core-fleet-black;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }

        &--disabled {
          &:hover {
            &::after {
              content: "";
              width: 100%;
              height: 0;
              border-bottom: 0;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }

        &.no-count:not(.errors-empty).react-tabs__tab--selected::after {
          bottom: -2px;
        }
      }
    }
  }
}