import { styled } from 'styleh-components';
import { media, fontValue } from '@skava/styleh-toolset';
import { Link } from '@skava/link';
import { Select } from '@skava/packages/ui';
import { Button as IconButton } from '@skava/packages/ui';
import { HeaderLogo } from '@skava/packages/ui';
import { LocationIcon as NavigationIcon } from '@skava/packages/ui';
/**
 * @todo @fixme @font
 * @todo important style decoupling
 *
 * @todo use () n elements instead
 */
const REFACTOR_LOGO = styled.css `
  .logo-icon {
    ${media.phoneOrSmaller `
      flex: 1;
      position: absolute;
      z-index: 0;
      justify-content: center;
      align-self: start;
      width: rem(120);
      left: 0;
      right: 0;
      margin: auto;
    `}
  }
`;
/**
 * @todo need to refactor search bar here... maybe move inline with header along with menus...
 */
const REFACTOR_THIS = styled.css `
  ${REFACTOR_LOGO};

  .search-bar {
    ${media.phoneOrSmaller `
      margin: 0;
      flex: 100%;
      order: 10;
    `}
  }
  .search-widget-component {
    ${media.desktopOrLarger `
      max-width: rem(540);
      width: 100%;
    `}
    ${media.tabletOrSmaller `
      width: 100%;
    `}
    .sk-search-wrapper {
      max-height: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
    }
  }
  .sk-search-icon-wrap {
    width: 22px;
    height: auto;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  /** @invalid name */
  .svg-icon-Location-icon {
    width: 1.125rem;
  }

  .click-boundary {
    ${media.tabletOrLarger `
      width: 100%;
    `};
    ${media.desktopOrLarger `
      display: flex;
    `};
    ${media.phoneOrSmaller `
      width: 100%;
    `};

    &.select-dropdown {
      width: rem(172);
      ${media.tabletOrSmaller `
        display: none;
      `}
    }
  }
`;
const HeaderWrap = styled.div.attrs({
    className: 'header',
    id: 'topHeader',
}) `
  ${REFACTOR_THIS};
  height: 5.625rem;
  position: relative;
  z-index: $layer-position-4;

  ${media.tabletOrSmaller `
    padding-right: 0;
  `}
  ${media.desktopOrLarger `
    padding: 0 var(--spacing-medium);
  `}

  transition: background-color 0.1s ease-in-out;
  background-color: var(--color-pure-white);
  ${(props) => props.isMenuExpanded &&
    styled.css `
      background-color: var(--color-pure-white);
    `};
`;
const HeaderBox = styled.div.attrs({
    className: 'header-content',
}) `
  margin: 0 auto;
  max-width: rem(1200);
  display: flex;
  align-items: center;
  padding: rem(19) 0;
  font: ${fontValue(25, 'regular')};

  ${media.phoneOrSmaller `
    flex-wrap: wrap;
    align-items: unset;
    padding-top: var(--spacing-small);
  `}
`;
const HeaderButtonGroup = styled.div.attrs({
    className: 'button-container',
}) `
  display: inline-flex;

  ${media.phoneOrSmaller `
    flex: 0;
    justify-content: flex-end;
    order: 3;
  `}
`;
const SearchGroup = styled.div.attrs({
    className: 'search-container',
}) `
  display: flex;
  flex-direction: row;
  flex: 1;
  border: 1px solid var(--color-dark-grey);
  border-radius: 0;
  background-color: var(--color-pure-white);

  .text {
    display: flex;
    flex: 1;
  }
  ${media.phoneOrSmaller `
    flex: 1 1 100%;
    order: 4;
    margin: 0 0.25rem;
  `}

  .dropdown-parent {
    padding-left: rem(30);
    > span {
      padding: 0;
      margin: 0;
      @font (16, medium);
      color: var(--color-dark-grey);
      padding-right: 0.25rem;
    }
  }
`;
const DropDownButton = styled(IconButton) `
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  @font (18, semi);
  width: auto;
  margin-left: rem(42);
  margin-right: var(--spacing-big);
  cursor: pointer;

  .button-text {
    color: var(--color-black);
  }
  svg {
    fill: var(--color-black);
  }

  ${media.tabletOrSmaller `
    display: none;
  `}

  svg {
    margin-left: 0.75rem;
    order: 0;
    width: 1.5rem;
  }
`;
const DropWrapper = styled.div `
  height: 3rem;
  ${media.tabletOrSmaller `
    display: none;
  `}
`;
const SearchDropDown = styled(Select) `
  height: 3rem;
  border: none;
  && {
    width: fit-content;
    min-width: 100%;
    max-width: 160px;
    &:last-child {
      margin-bottom: rem(40);
    }
    svg {
      fill: var(--color-dark-grey);
    }
  }

  &::after {
    display: block;
    content: ' ';
    position: absolute;
    height: calc(100% - 1rem);
    top: 0.5rem;
    bottom: 0.5rem;
    background: var(--color-light-white-grey);
    width: 1px;
    right: 0;
  }

  .select-dropdown-list {
    position: absolute;
    top: 50px;
    width: rem(192);
    background: var(--color-pure-white);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    .text {
      display: block;
      @font (16, medium);
    }
  }
`;
const StyledLogo = styled(HeaderLogo) `
  ${media.tabletOrSmaller `
    padding-right: var(--spacing2x);
  `}
  ${media.phoneOrSmaller `
    padding-right: 0;
  `}
  svg {
    ${media.tabletOrSmaller `
      height: rem(34);
      width: rem(136);
    `}
    ${media.phoneOrSmaller `
      margin-top: var(--spacing-small);
      height: 1.75rem;
      width: rem(112);
    `}
  }
`;
const HamburgerButton = styled(IconButton) `
  padding: var(--spacing-medium);
  margin: 0;

  ${media.desktopOrLarger `
    display: none;
  `}
  ${media.tabletOrSmaller `
    padding-right: var(--spacing2x);
  `}
  ${media.phoneOrSmaller `
    padding-bottom: var(--spacing-big);
    padding-right: rem(71);
    flex: 0;
    padding-left: 0.625rem;
    svg {
      width: 1.25rem;
      height: 0.75rem;
    }
  `}
  @media (max-width: 340px) {
    padding-right: rem(61);
  }
`;
const StoreLocatorIcon = styled(NavigationIcon) `
  width: 1.75rem;
  height: 1.75rem;
`;
const StyledStoreLocatorButtonLink = styled(Link) `
  display: flex;
  width: auto;
  @font (18, regular);
  cursor: pointer;
  align-items: center;
  margin-left: var(--spacing-small);
  margin-top: -0.4rem;

  ${media.phoneOrSmaller `
    display: none;
  `}
  ${media.tabletOrSmaller `
    margin-left: var(--spacing-medium);
    .button-text {
      display: none;
    }
  `}

  ${media.desktopOrLarger `
    margin-left: 1.75rem;
  `}

  svg {
    order: 2;
    width: 1.5rem;
    height: 1.5rem;

    path {
      &:first-child {
        fill: var(--color-black);
      }
    }
  }

  a {
    width: auto;
    height: auto;

    ${media.tabletOrSmaller `
      display: none;
    `}
  }
`;
export { SearchGroup, DropWrapper, SearchDropDown, DropDownButton, HeaderButtonGroup, HeaderBox, HeaderWrap, StyledLogo, HamburgerButton, StoreLocatorIcon, StyledStoreLocatorButtonLink, };
//# sourceMappingURL=styled.js.map