import React from 'react' ; import styled from 'styled-components' ; import { typography } from 'design/system' ; import { Flex , Box } from 'design' ; const Tabs = props => { return ( < StyledTabs height = "40px" color = "text.secondary" as = "nav" { ... props } />); } ; export const TabItem = ( { title } ) => < StyledTabItem > { title } < /StyledTabItem>; const StyledTabItem = styled ( Box ) `
  max-width: 200px;
  height: 100%;
  outline: none;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  align-items: center;
  display: flex;
  font-size: 11px;
  justify-content: center;
  flex: 1;

  &:hover,
  &.active,
  &:focus {
    color: ${ props => props . theme . colors . primary . contrastText };
  }

  ${ ( { theme } ) => ( { backgroundColor : theme . colors . bgTerminal , color : theme . colors . primary . contrastText , fontWeight : 'bold' , transition : 'none' , } ) }

  ${ ( { theme } ) => { return { border : 'none' , borderRight : `1px solid ${ theme . colors . bgTerminal }` , '&:hover, &:focus' : { color : theme . colors . primary . contrastText , transition : 'color .3s' , } , } ; } }
` ; const StyledTabs = styled ( Flex ) `
  ${ typography }
` ; export default Tabs ;