_patterns_tabs.scss

@import 'settings';

@mixin vf-p-tabs {
  // for _patterns_tabs.scss
  $color-tabs-active-bar: $color-mid-dark !default;

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

    &::after {
      background: linear-gradient(to right, $color-transparent 0%, $color-x-light 45%, $color-x-light 100%);
      color: $color-mid-dark;
      content: '\203A';
      display: block;
      font-size: 2rem;
      line-height: calc(100% + 1rem - #{$bar-thickness});
      padding-left: 1.5rem;
      padding-right: $sp-large;
      pointer-events: none;
      position: absolute;
      right: 0;
      text-align: right;
      top: 0;
      width: 1rem;

      @media screen and (min-width: $breakpoint-medium) {
        display: none;
      }
    }

    &__list {
      @extend %vf-pseudo-border--bottom;

      display: flex;
      margin: 0 auto $spv-outer--scaleable;
      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 {
      @include vf-focus;

      color: $color-dark;
      display: block;
      line-height: map-get($line-heights, default-text);
      padding: $spv-inner--medium $sph-inner;
      position: relative;

      &:active,
      &:hover,
      &:visited {
        color: $color-dark;
        text-decoration: none;
      }

      &::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;
        }
      }

      &:hover,
      &[aria-selected='true'] {
        @include vf-highlight-bar($color-tabs-active-bar, bottom, false);

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