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

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

interface HeaderBlogContainerProps {
  readProgress: number;
}

export const HeaderBlogContainer = styled.header<HeaderBlogContainerProps>`
  ${header};
  ${headerFixed};
  
  ${Link} {
    padding: 8px 25px;
  }
  
  ${MenuHeaderDesktop} {
    > a {
      &.active,
      &:hover {      
        color: ${props => props.theme.default.colors.blue}!important;
        ${props => props.theme.default.fonts.ubuntuBold};
        padding: 10px 13px;
      }
    }
  }
  
  
  ${mediaMax.small(css`
    .button-cta {
      display: none;
    }
  `)}
  
  :after {
    content: "";
    width: ${props => props.readProgress}%;
    background: ${props => props.theme.default.gradient.yellow};
    position: fixed;
    height: 4px;
    top: ${HEADER_HEIGHT}px;
    left: 0;
    transition: width 100ms linear;
  }
`;