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

import styled from 'styled-components/macro'

import { Logo } from 'features/Logo'
import { T9n } from 'features/T9n'
import { customScrollbar } from 'features/Common'

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

export const StyledLink = styled(Link)``

export const UserSportFavWrapper = styled.aside`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
`
export const ScrollWrapper = styled.div`
  width: 80px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: overlay;
  ${customScrollbar}
`

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;
  min-height: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 5px;
  background-color: #fff;
  margin-bottom: 16px;
  ${UserSportFavXWrapper} {
    display: none;
  }
  
  ${TooltipBlockWrapper} {
    display: none;
  }
  
  &: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;
  min-height: 48px;
  border-radius: 50%;
  background: #3f3f3f url('/images/sportFavStar.png') no-repeat center;
  margin-bottom: 16px;
`

export const FavoriteModal = styled.div`
 width: 411px;
 height: 202px;
 display: flex;
 flex-direction: column;
 justify-content: center; 
 align-items: center;
`

export const ExclamationSign = styled.div`
  width: 77px;
  height: 66px;
  background: url(/images/exclamation.svg) no-repeat; 
  margin-bottom: 20px;
`

export const Text = styled(T9n)`
  text-align: center;
  line-height: 160.2%;
`