.component__tabs-wrapper {
  position: sticky;
  top: 0;
  background-color: $core-white;
  z-index: 2;

  .react-tabs {
    &__tab-list {
      border-bottom: 1px solid $ui-gray;
    }
    &__tab {
      padding: $pad-small 0;
      margin-right: $pad-xxlarge;
      font-size: $x-small;
      border: none;
      display: inline-flex;
      flex-direction: column;
      align-items: center;

      &:focus {
        box-shadow: none;
        outline: 0;

        &:after {
          left: 0;
          bottom: 0;
        }
      }
      // 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;

        &::after {
          content: "";
          width: 100%;
          height: 0;
          border-bottom: 2px solid #6a67fe;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
      &--disabled {
        cursor: not-allowed;
      }
      &.no-count:not(.errors-empty).react-tabs__tab--selected::after {
        bottom: -2px;
      }
      .count {
        margin-right: $pad-small;
        padding: $pad-xxsmall 12px;
        background-color: $core-vibrant-red;
        display: inline-block;
        border-radius: 29px;
        color: $core-white;
        font-weight: $bold;
      }
    }
    &__tab-panel {
      .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;
        }
      }
    }
  }
}