import styled, { css } from 'styled-components/macro'

import { devices } from 'config'
import { isMobileDevice } from 'config/userAgent'

import { Logo } from 'features/Logo'
import { ModalContainer } from 'features/Modal/styled'
import { Icon } from 'features/Menu/styled'

export const FavoritesPopup = styled(ModalContainer)`
  background-color: black;
  background-image: url(/images/Checker.png);
  background-size: 13px;
`

export const MainLogo = styled(Logo)`
  @media ${devices.mobile} {
    width: 100px;
    height: 25px;
  }
`

export const Wrapper = styled.div`
  padding: 2rem 3rem;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    49.07% 49.07% at 50% 29.54%,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0) 100%
  ), rgba(0, 0, 0, 0.9);

  
  ${isMobileDevice
    ? css`
      padding: 5px;
    `
    : ''};
`

export const HomeIcon = styled(Icon)`
  opacity: 1;

  &:only-child {
    margin: 0;
  }

  @media ${devices.mobile} {
    width: 3.5rem;
    height: 3.5rem;
  }
`

export const HeaderWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`

export const GroupWrapper = styled.div`
  display: flex;
  justify-content: space-between;

  @media ${devices.mobile} {
    flex-wrap: wrap;
  }
`

export const EmptyDiv = styled.div``
