@import '../../variables';
@import '../../mixins';

@include exports('components.fui-tabs-nav') {
  .fui-tabs-nav {
    @include tab-header;
  }

  .fui-tabs-links {
    position: relative;
    display: flex;

    [fui-align-tabs='center'] & {
      justify-content: center;
    }

    [fui-align-tabs='end'] & {
      justify-content: flex-end;
    }
  }

  // Wraps each link in the header
  .fui-tabs-link {
    @include tab-label;
    vertical-align: top;
    text-decoration: none; // Removes anchor underline styling
    position: relative;
    overflow: hidden; // Keeps the ripple from extending outside the element bounds
    -webkit-tap-highlight-color: transparent;

    [fui-stretch-tabs] & {
      flex-basis: 0;
      flex-grow: 1;
    }

    &.fui-tab-disabled {
      // We use `pointer-events` to make the element unclickable when it's disabled, rather than
      // preventing the default action through JS, because we can't prevent the action reliably
      // due to other directives potentially registering their events earlier. This shouldn't cause
      // the user to click through, because we always have a `.mat-tab-links` behind the link.
      pointer-events: none !important;
    }
  }

  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
    .fui-tabs-link {
      min-width: 72px;
    }
  }
}