@import 'settings';

@mixin vf-p-tabs {
  .p-tabs {
    border-radius: 0;
    overflow: hidden;
    padding: 0;
    position: relative;

    &__list {
      // inset box shadow used to draw the border inside the list's box
      box-shadow: inset 0 -1px 0 0 $colors--theme--border-default;
      display: flex;
      margin: 0 auto $spv--x-large;
      overflow-x: auto;
      padding: 0;
      position: relative;
      white-space: nowrap;
      width: 100%;
    }

    &__item {
      margin: 0;
      padding: 0;
      width: auto;

      &:last-child {
        margin-right: $sp-xxx-large;
      }
    }

    &__link {
      @extend %vf-button-base;
      @include vf-button-pattern(
        $button-border-color: $color-transparent,
        $button-hover-border-color: $color-transparent,
        $button-active-border-color: $color-transparent,
        $button-disabled-border-color: $color-transparent
      );
      @include vf-highlight-bar(transparent, bottom, false);
      align-items: center;
      background-color: transparent;
      border: none;
      color: $colors--theme--text-default;
      display: flex;
      gap: $sph--small;
      height: 100%;
      line-height: map-get($settings-text-default, line-height);
      margin-bottom: 0;
      padding: $spv--medium $sph--large;
      position: relative;

      &::before {
        @extend %vf-pseudo-border;

        bottom: 0;
        z-index: 1;
      }

      // make sure tab strip border doesn't overlap focus outline
      &:focus {
        z-index: 1;

        &::before,
        &::after {
          content: none;
        }
      }

      &:visited {
        color: $colors--theme--text-default;
      }

      // Display the highlight when focusing in modern browsers that support
      // focus-visible.
      &:focus:not(:focus-visible) {
        @include vf-highlight-bar($colors--theme--text-default, bottom, false);
      }

      &:hover {
        background-color: transparent;
        @include vf-highlight-bar($colors--theme--border-default, bottom, false);

        &::before,
        &:focus:not(:focus-visible)::before {
          bottom: 1px;
          height: calc($bar-thickness - 1px);
        }

        // Hide the highlight when focusing (in combination with the parent
        // states) in browsers that don't support focus-visible.
        &:focus::before,
        &:focus::after {
          content: none;
        }

        // Display the highlight when focusing (in combination with the parent
        // states) in modern browsers that support focus-visible.
        &:focus:not(:focus-visible) {
          @include vf-highlight-bar($colors--theme--border-default, bottom, false);
        }
      }

      &:active,
      &[aria-selected='true'] {
        background-color: transparent;
        @include vf-highlight-bar($colors--theme--text-default, bottom, false);

        // Display the highlight when focusing (in combination with the parent
        // states) in modern browsers that support focus-visible.
        &:focus:not(:focus-visible) {
          @include vf-highlight-bar($colors--theme--text-default, bottom, false);
        }

        // Hide the highlight when focusing (in combination with the parent
        // states) in browsers that don't support focus-visible.
        &:focus::before,
        &:focus::after {
          content: none;
        }
      }
    }
  }
}