import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
// @todo change the const name
const HeaderHeader = 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;
      `};
  }
`;
const HeaderContainer = styled.div.attrs({
    className: 'sk-header-container',
}) `
  ${media.phoneOrSmaller `
    .search-widget-component label {
      padding-left: var(--spacing-medium);
      padding-right: var(--spacing-medium);
    }
  `}
`;
const Header = styled.div.attrs({
    className: 'sk-header',
}) `
  @container();
  max-width: 66rem;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;

  .cart-container,
  .sk-search-icon-container {
    display: flex;

    ${media.phoneOrSmaller `
      position: absolute;
    `}
  }

  .sk-search-icon-wrap {
    ${media.phoneOrSmaller `
      display: inline-flex;
    `}
  }
`;
const HeaderLeftContainer = styled.div.attrs({
    key: '1',
    className: 'sk-header-left-wrapper',
}) `
  display: flex;
  align-items: center;
`;
/**
 * @todo only change base heart styles in WR
 * @todo move the color changes of the heart into classic
 */
const HeaderRightContainer = styled.div.attrs({
    key: 'r',
    className: 'sk-header-right-wrapper',
}) `
  display: flex;
  margin-left: auto;
  align-items: center;
  font: $font-14-regular;
  justify-content: flex-end;
`;
export { HeaderHeader, HeaderContainer, Header, HeaderLeftContainer, HeaderRightContainer };
//# sourceMappingURL=styled.js.map