@import '../scss/variable';
$tab-prefix: #{$prefix}-tab;
@mixin tab-base {
  display: inline-flex;
  overflow: hidden;
  flex: none;
  align-items: center;
  outline: none;
  text-align: center;
  white-space: nowrap;
  transition: all $animation-duration-base ease-out;
  cursor: pointer;
  user-select: none;
}

@mixin ne-tab {
  .#{$tab-prefix} {
    @include tab-base;
    &:hover,
    &:active,
    &:focus,
    &-selected {
      color: $primary-color;
    }
    &-full-width {
      flex: 1 0 auto;
    }
    &-text {
      overflow: hidden;
      width: 100%;
      padding: 6px 12px;
      // min-width: 0;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }
    &-disabled {
      color: $component-disabled-color;
      cursor: not-allowed;
      &:hover,
      &:active,
      &:focus {
        color: $component-disabled-color;
      }
    }
  }
  @each $name, $value in $sizes-map {
    .#{$tab-prefix}-#{$name} {
      min-width: map_get($tab-width, $name);
    }
  }
}