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

@include exports('components.fui-tab-header') {
  .fui-tab-header {
    display: flex;
    @include tab-header;
  }

  .fui-tab-header-scrollable {
    overflow-x: auto;
  }

  // Wraps each tab label
  .fui-tab-label {
    @include tab-label;
    position: relative;
  }

  @media screen and (max-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, lg)) {
    .fui-tab-label {
      padding: 0 12px;
    }
  }

  .fui-tab-label-container {
    display: flex;
    flex-grow: 1;
  }

  .fui-tab-list {
    flex-grow: 1;
    position: relative;
    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
  }

  .fui-tab-labels {
    display: flex;

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

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

  .fui-tab-dropdown .fui-dropdown-icon {
    height: 9px;
    width: 9px;
    margin-left: 7px;
  }
}