import styled from 'styled-components/macro'

import { devices } from 'config'

import { T9n } from 'features/T9n'
import { ItemsList } from 'features/ItemsList'
import { GenderComponent, StyledLink } from 'features/ItemsList/styled'

export const Main = styled.main`
  margin-top: 75px;
  margin-bottom: 30px;

  @media ${devices.tablet} {
    margin-top: 30px;
  }
`

export const Title = styled(T9n)`
  display: block;
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  color: #fff;
  margin-bottom: 30px;
  padding: 0 14px;
`

export const ResultsList = styled(ItemsList)`
  ${StyledLink} {
    background-color: transparent;

    :focus-within,
    :hover {
      background-color: rgba(153, 153, 153, 0.4);
    }
  }

  ${GenderComponent} {
    display: none;
  }
`