import React from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'

export const TabItem = ({ component: Component, ...rest }) => {
  const StyledComponent = styled(Component)`
    display: inline-block;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    color: ${props => props.inverted ? '#000' : '#fff'};
    text-transform: uppercase;
    cursor: pointer;
    margin: 0 15px 0 0;
    padding-bottom: 11px;
    text-decoration: none;

    ${props => props.active && css`
      border-bottom: 1.5px solid #ee0099;
    `}

    &:hover, &:active {
      border-bottom: 1.5px solid #ee0099;
    }
  `

  return <StyledComponent {...rest} />
}

const { any, bool } = PropTypes

TabItem.propTypes = {
  /** Invert the tab color style. */
  inverted: bool,
  /** Mark the current item as active style. */
  active: bool,
  /** Component used to render */
  component: any
}

TabItem.defaultProps = {
  inverted: false,
  active: false,
  component: 'a'
}

TabItem.displayName = 'TabItem'

/** @component */
export default TabItem

@@ -585,35 +585,33 @@
  border-bottom: 
-1.5
+2
 px solid #ee0099
@@ -608,24 +608,51 @@
 id #ee0099;%0A
+      padding-bottom: 9px;%0A
     %60%7D%0A%0A    
@@ -696,11 +696,9 @@
 om: 
-1.5
+2
 px s
@@ -707,24 +707,51 @@
 id #ee0099;%0A
+      padding-bottom: 9px;%0A
     %7D%0A  %60%0A%0A 

change padding on hover tabitem