import styled, { css } from 'styled-components';

import { header, headerFixed } from '../../shared/Header.style';
import { Link } from '../../shared/Link.style';
import { mediaMax } from '../../../theme/mixins';
import { HEADER_HEIGHT } from '../../shared/MenuHeader.style';

export const HeaderContainer = styled.header<{ isShow: boolean }>`
  ${header};
  ${headerFixed};
  transition: top 200ms ease-in;
  
  ${props => props.isShow ? css `
    position: fixed;
    
    // logo
    > svg {
      ${mediaMax.medium(css`
        left: 15px;
      `)}
  
      ${mediaMax.extraSmall(css`
        .logo-text {
          display: none;
        }
      `)}
    }
  ` : css`
    position: absolute;
    top: -${HEADER_HEIGHT}px;
    // logo
    > svg {
      height: 50px;
      margin-top: ${HEADER_HEIGHT + 80}px;
      left: 50%;
      transform: translate3d(-50%, 0 ,0);
  
      path {
        fill: ${props => props.theme.default.colors.white};
      }
    }
  `}
  
  ${Link} {
    margin: auto 0 auto auto;
    max-width: 230px;
  }
`;