/**
 * @fileoverview @todo move this into themed
 */
import React from 'react';
import { styled } from 'styleh-components';
import { Separator as BaseSeparator } from 'atoms/Separator';
import { Button } from 'atoms/Button';
import Link from '@skava/link';
import { wording, routing } from './fixture';
export const ButtonWrap = styled.span.attrs({
    className: 'header-account-button-wrap',
}) ``;
export const ButtonIcon = styled.div.attrs({
    className: 'sk-header-account-button-icon',
}) ``;
export const Separator = BaseSeparator;
const StyledButton = styled.withComponent(Button) `
  a {
    color: var(--color-pure-white);
    &:hover {
      color: var(--color-pure-white);
    }
  }
`;
const StyledOrderLookupButton = styled.withComponent(StyledButton) `
  margin-right: var(--spacing2x);
`;
const StyledSignInButtonButton = styled.withComponent(StyledButton) `
   @font (14,medium);
   color: red;
`;
const StyledLink = styled.withComponent(Link) `
   @font (14,medium);
`;
export const HeaderWrap = styled.div.attrs({
    className: 'sk-header-account-wrap',
}) `
  display: flex;
  align-items: center;
  cursor: pointer;
`;
export const OrderLookup = (props) => (React.createElement(StyledOrderLookupButton, Object.assign({ isLink: true, className: "sk-header-order-lookup-wrap" }, props)));
export const AccountButton = (props) => (React.createElement(StyledButton, Object.assign({ className: "sk-header-account-button-text" }, props)));
export const OrderHistoryButton = (props) => (React.createElement(StyledButton, Object.assign({ className: "sk-header-orderhistory-button-text" }, props)));
export const SignInButton = (props) => (React.createElement(StyledSignInButtonButton, Object.assign({ isLink: true, className: "sk-header-signin-button-text" }, props, { qa: "qa-signin" })));
const REACT_EMPTY = () => '';
const Hello = styled.div.attrs({
    className: 'hello',
}) `
  padding-left: var(--spacing-small);
  font-weight: 700;
`;
const ModalBox = styled.aside.attrs({
    className: 'sk-header-modal-wrap',
}) `
  padding: var(--spacing-medium);
  margin: auto;
`;
const ButtonText = styled.div.attrs({
    className: 'header-account-button-text',
}) ``;
const DropdownListWrap = styled.div.attrs({
    className: 'sk-dropdown-wrap',
}) ``;
const AccountLinkAdapter = (props) => (React.createElement(Link, Object.assign({ to: wording.myAccountPath }, props, { "data-qa": "qa-account" })));
export const AccountLink = styled.withComponent(AccountLinkAdapter) `
  color: var(--color-pure-white);
`;
const SignOutLinkAdapter = (props) => (React.createElement(Link, Object.assign({ to: wording.signOutPath }, props, { "data-qa": "qa-signout" })));
export const SignOutLink = styled.withComponent(SignOutLinkAdapter) `
  color: inherit;
  ${AccountLink.componentStyle.rules};
`;
const StyledButtonLink = styled.withComponent(StyledButton) `
  margin-right: var(--spacing2x);
  color: var(--color-light-grey);
  @font (14, medium);

  a {
    color: var(--color-light-grey);
  }
`;
/**
 * @todo these should be dynamic, just iterate a list and make them StyledButtonLinks
 */
export const Community = (props) => (React.createElement(StyledButtonLink, Object.assign({ text: wording.community, to: routing.customerSupportPath }, props)));
export const ClassesAndEvents = (props) => (React.createElement(StyledButtonLink, Object.assign({}, props, { text: wording.classesAndEvents })));
const GiftCards = (props) => (React.createElement(StyledButtonLink, Object.assign({}, props, { text: wording.giftCards, to: routing.giftCardsPath })));
export const signUpUrl = process.env.BUSINESS_RELATIONSHIP === 'B2B' ? wording.adminSignUpPath : wording.signUpPath;
export const SignUpLinkAdapter = (props) => (React.createElement(StyledLink, Object.assign({ to: signUpUrl }, props, { "data-qa": "qa-signup" })));
export const SignUpLink = styled.withComponent(SignUpLinkAdapter) `
  padding-left: unset;
  color: var(--color-pure-white);
  a {
    color: var(--color-pure-white);
  }
`;
export const HeaderAccountContainer = styled.div ``;
//# sourceMappingURL=_elements.js.map