import styled from 'styled-components'
import theme from 'theme'

/* stylelint-disable order/properties-alphabetical-order */
export const MenuItemWrapper = styled.li`
  border-bottom: 1px;
  display: block;
  float: ${props => props.float};
  margin: 0 30px 0 0;
  position: relative;

  :after ${props =>
    !props.active
      ? `{}`
      : `{
      background-image: ${theme.gradients['menu-blue']};
      top: 0;
      content: '';
      display: block;
      height: 2px;
      position: absolute;
      width: 100%;
    }`};
`
/* stylelint-enable order/properties-alphabetical-order */

export const MenuItemButton = styled.button`
  background: transparent;
  border: none;
  color: ${props =>
    props.active ? theme.colors['blue-cyan'] : theme.colors['light-grey2']};
  cursor: pointer;
  font: ${theme.textStyles.navbarMenu.font};
  letter-spacing: 0.5px;
  opacity: ${props => (props.active ? 1 : 0.3)};
  padding: 6px;

  :focus {
    outline: none;
  }

  :hover {
    color: ${theme.colors['blue-cyan']};
  }
`
