@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(tabs) {
  @include e(nav) {
    margin: 2px;
  }
  @include e(header) {
    border: getCssVarWebexCom('border', 'width', 'core', 'none');
  }
  @include e(item) {
    color: getCssVarWebex('text', 'secondary', 'normal');
    height: 28px;
    line-height: 28px;
    padding: 0 16px;
    margin-right: 8px;
    font-size: 14px;
    &:hover {
      color: getCssVarWebex('text', 'primary', 'normal');
      border-radius: 25px;
      background-color: getCssVarWebex('button', 'secondary', 'hover');
    }
    &:active {
      //color: getCssVarWebex('text', 'secondary', 'normal');
      //border-radius: 25px;
      //background-color: getCssVarWebex('button', 'secondary', 'active', 'hover');
    }
    @include when(active) {
      color: getCssVarWebex('text', 'primary', 'normal');
      border: getCssVarWebexCom('border', 'width', 'core', 'none');
      border-radius: 25px;
      background-color: getCssVarWebex('button', 'secondary', 'active', 'normal');
    }
  }
}
