import styled from 'styled-components'

import CommunityFaceLogo from '@components/CommunityFaceLogo'
import { cs, theme } from '@utils'

export const Wrapper = styled.div`
  ${cs.flex('align-end')};
  margin-left: 4%;
`

export const CommunityLogo = styled(CommunityFaceLogo)`
  width: 22px;
  height: 22px;
  margin-right: 22px;
  margin-bottom: 4px;
`

export const MobileHint = styled.div`
  ${cs.flex('align-center')};
  color: ${theme('thread.articleTitle')};
  margin-bottom: 4px;
  margin-left: -10px;
  display: none;
  ${cs.media.mobile`display: flex`};
`

export const MiniTab = styled.div`
  border-bottom: ${({ active }) => (active ? '3px solid' : '')};
  border-bottom-color: ${({ active }) =>
    active ? theme('thread.articleTitle') : ''};
  padding-bottom: ${({ active }) => (active ? '2px' : '5px')};
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 6px;
  color: ${({ active }) =>
    active ? theme('header.tabActive') : theme('header.tabOthers')};
  cursor: pointer;

  ${cs.media.mobile`display: none`};
`

@@ -197,29 +197,9 @@
 )%7D;%0A
-  margin-left: 4%25;%0A%60%0A
+%60
 %0Aexp
@@ -324,25 +324,24 @@
 tom: 4px;%0A%60%0A
-%0A
 export const
@@ -538,17 +538,16 @@
 ex%60%7D;%0A%60%0A
-%0A
 export c

remove margin-left when fixed header