import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { MiddleBar, HeaderWrap } from './MiddleBar';
export const StyledSemanticBannerHeader = styled.header.attrs({
    className: 'header',
    role: 'banner',
}) `
  background: transparent;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  /* border-bottom: 1px solid #292929; */

  /**
   * @todo
   * ! improve this just hides top bar because of the 80px at the top
   */
  transition: opacity 0.24s ease-in-out, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  ${media.desktopOrLarger `
    ${(props) => props.isScrollingDown &&
    styled.css `
        transform: translateY(-44px);
      `};
  `}

  .top-bar {
    transition: background-color 0.1s ease-in-out, opacity 0.1s ease-in-out;

    ${(props) => props.isScrollingDown &&
    styled.css `
        opacity: 0.7;
        background-color: var(--color-pure-white);
      `};
  }
  ${media.tabletOrSmaller `
    ${(props) => props.isScrollingDown &&
    styled.css `
        transform: translateY(0);
      `};
  `}

  .top-bar * {
    transition: color 0.1s ease-in-out;

    ${(props) => props.isScrollingDown &&
    styled.css `
        color: transparent;
        fill: transparent;
        stroke: transparent;
      `};
  }
`;
export const StyledMiddleBar = styled(MiddleBar) `
  ${HeaderWrap} {
    background: blue;
  }
`;
//# sourceMappingURL=styled.js.map