import { Link } from 'react-router-dom'

import styled from 'styled-components/macro'

import { Logo } from 'features/Logo'
import { TooltipBlockWrapper } from './TooltipBlock/styled'

export const StyledLink = styled(Link)``

export const UserSportFavWrapper = styled.div`
  width: 80px;
  display: flex;
  flex: 0 0 auto;
  flex-direction:column;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
`

export const UserSportFavLogoWrapper = styled(Logo)`
  margin-top: 35px;
  margin-bottom: 120px;
`

export const UserSportFavXWrapper = styled.span`
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background: transparent url('/images/xIcon.png') no-repeat center;
  height: 11px;
  width: 11px;
  border: none;
`

export const UserSportFavItemLogoWrapper = styled.div`
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 5px;
  background-color: #fff;
  margin-bottom: 16px;
  
  ${UserSportFavXWrapper} {
    display: none;
  }
  
  ${TooltipBlockWrapper} {
    display: none;
    position: absolute;
    left: 40%;
    top: 120%;
    z-index: 2;
  }
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    
    ${UserSportFavXWrapper} {
      display: block;
    }
    
    ${TooltipBlockWrapper} {
      display: block;
    }
  }
`

export const UserSportFavImgWrapper = styled.img`
  width: 100%;
`

export const UserSportFavStar = styled.div`
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #3f3f3f url('/images/sportFavStar.png') no-repeat center;
  margin-bottom: 16px;
`