// RAMEN TAB NAV COMPONENT
//
// N/A
//
//
// Required Component Variables:
//
// $nav-tab-border-bottom: Bottom border on the tabs
// $nav-tab-divider: The border divider between tabs
// $nav-tab-link-color: Tab link colour
// $nav-tab-link-border-bottom: Default border bottom on tab links
// $nav-tab-link-border-bottom-hover: Hover border bottom on tab links
// $nav-tab-link-border-bottom-active: Active border bottom on tab links
// $nav-tab-link-padding: Spacing around tab links
//
//

@mixin tab-nav {
  display: flex;
  width: 100%;
  border-bottom: $nav-tab-border-bottom;
  overflow: auto;
}

@mixin tab-nav-item {
  flex: 1 1 100%;
  text-align: center;
  border-right: $nav-tab-divider;

  &:last-child {
    border-right: none;
  }
}

@mixin tab-nav-link {
  color: $nav-tab-link-color;
  display: block;
  padding: $nav-tab-link-padding;
  border-bottom: $nav-tab-link-border-bottom;
  text-decoration: none;
  white-space: nowrap;

  &:hover {
    border-bottom: $nav-tab-link-border-bottom-hover;
  }

  &.is-active {
    border-bottom: $nav-tab-link-border-bottom-active;
  }
}

.c-tab-nav {
  @include tab-nav;

  &__item {
    @include tab-nav-item;
  }

  &__link {
    @include tab-nav-link;
  }
}