/**
 * @fileoverview @todo @fixme @styles REALLY BAD STYLES !!! NEEDS MAJOR CLEANUP
 */
import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { Button, FlatButton } from '@skava/packages/ui';
import { Copyright, SeparatorElement as StyledSeparator } from '@skava/packages/ui';
import { LanguageItem } from '@skava/packages/features/Locale/LanguageOptions';
import { application } from '@skava/state';
// not sure we are using this how it seems it is being used
export const StyledLanguageItem = styled(LanguageItem) ``;
export const HeaderIconWrap = styled.span `
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  min-width: var(--spacing3x);
  min-height: var(--spacing3x);
  background-color: var(--color-white-grey);
  margin-bottom: var(--spacing-small);

  .svg-icon-orders {
    padding-left: 1px;
    padding-top: 2px;
  }
`;
export const MobileNav = styled.div `
  min-height: 100vh;
  background: var(--color-pure-white);
  width: rem(280);
  display: flex;
  flex-direction: column;
  color: var(--color-blue);
  overflow-x: hidden;
`;
export const SideBarBackWrap = styled.span `
  border-right: 1px solid var(--color-pure-white);
  padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small);
  position: relative;
  display: flex;

  .svg-icon-arrow-left path {
    fill: var(--color-black);
  }
`;
export const SideBarTitleText = styled.span `
  padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small);
`;
export const SideBarPageTitleWrapper = styled.div.attrs({
    className: 'sk-sidebar-page-title-wrapper',
}) ``;
export const reusableSidebarGroupStyles = styled.css `
  display: flex;
  padding: var(--spacing-medium);
`;
export const iconStyles = styled.css `
  a {
    color: var(--color-pure-white);
  }
  .svg-icon g {
    stroke: var(--color-pure-white);
  }
`;
export const sharedHeaderFooterMobileStyles = styled.css `
  display: flex;
  flex-direction: column;
  align-items: self-end;
  padding: 0;

  .menu-location-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
`;
export const MobileMenuFooter = styled.footer `
  ${reusableSidebarGroupStyles};
  background-color: var(--color-white-grey);
  ${sharedHeaderFooterMobileStyles};
`;
export const MobileMenuFooterLink = styled.div `
  background-color: var(--color-black);
  ${sharedHeaderFooterMobileStyles};
  padding: var(--spacing-medium) 0 var(--spacing2x);
  flex: auto;
`;
export const HeaderLinkWrap = styled.div `
  ${reusableSidebarGroupStyles};
  background-color: var(--color-black);
  ${sharedHeaderFooterMobileStyles};
  padding: 0.5rem;
`;
/**
 * @todo check design, seems like row? or it has specific styles
 */
export const StyledCopyRight = styled(Copyright) `
  @font (14);
  width: calc(100% - 2rem);
  padding-top: var(--spacing-small);
  margin: 1rem 0 0 1rem;
  color: var(--color-pure-white);
  border-top: var(--spacing-smallest) solid var(--color-pure-white);
  flex-direction: column;
  align-items: flex-start;
  ${StyledSeparator} {
    ${media.tabletOrSmaller `
      display: none;
    `}
  }
`;
export const MobileMenuPageWrap = styled.div.attrs({
// role: 'presentational'?
}) `
  position: relative;
  width: 100%;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.6, 1);

  flex: 1;
  display: flex;
  flex-direction: row;
`;
const sharedLinkButtonStyles = styled.css `
  padding: 1rem;
  color: var(--color-black);
  display: flex;
  flex-direction: row;
  align-items: center;

  && {
    a {
      color: inherit;
      justify-content: left;
      text-align: left;
    }
  }

  .svg-icon-arrow-right {
    fill: var(--color-blue);
    margin-left: auto;
  }
`;
/**
 * @example Plain Tees >
 */
export const SidebarBrowseLink = styled(Button).attrs({
// 'data-debug': 'browse-link',
}) `
  ${sharedLinkButtonStyles};
  @font (18,semi);

  ::before {
    margin-right: var(--spacing-small);
  }
`;
/**
 * @example 3/4 sleeve >
 */
/* prettier-ignore */
export const SidebarPageLink = styled(Button).attrs({
    'isLink': true,
    'data-debug': 'page-link',
}) `
  ${sharedLinkButtonStyles};
  @font (16,semi);

  border-bottom: 1px solid var(--color-white-grey);

  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;

  && {
    a {
      color: var(--color-dark-grey);
    }
  }
`;
/**
 * @todo marin-left => margin-left !
 */
export const SideBarWrap = styled.div `
  marin-left: ${(props) => `${100 * props.index}%`};
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  will-change: margin-left;
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-y: auto;
  overflow-x: hidden;
  ${media.tabletOrSmaller `
    height: ${application.screen.height}px;
  `}
`;
export const SideBarPageTitle = styled.h3 `
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  color: var(--color-black);
  @font (18,medium);
  ${media.phoneOrSmaller `
    margin: 0;
  `}
`;
export const SideBarPageImage = styled.div `
  height: var(--spacing6x);
  overflow-y: hidden;

  img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
`;
export const StyledFlatButton = styled(FlatButton) `
  ${(props) => props.isHeader &&
    styled.css `
      ${iconStyles};
    `};

  .button-text {
    align-self: center;
    padding: 1rem 1rem;
    color: var(--color-black);

    ${media.tabletOrSmaller `
      color: var(--color-black);
    `}
  }
  span {
    @font (14,semi);
    margin-bottom: 0;
    background-color: transparent;

    ${(props) => props.isHeader &&
    styled.css `
        color: var(--color-pure-white);
      `};

    &:hover {
      color: var(--color-blue);
    }
  }

  ${(props) => props.isFooter &&
    styled.css `
      ${iconStyles};
      @font (14,semi);
      padding: var(--spacing-medium);
      color: var(--color-pure-white);
      display: flex;
      flex: 1;
      ${media.phoneOrSmaller `
        padding: 0;
      `}

      a {
        color: var(--color-pure-white);
        padding-left: 0;
        span {
          color: inherit;
        }
      }
      &.button-text,
      .button-text {
        padding: 0;
        color: var(--color-pure-white);
      }
    `};

  a {
    height: auto;
    width: auto;
    padding: 0.75rem var(--spacing-medium);

    ${(props) => props.isHeader &&
    styled.css `
        padding: var(--spacing-medium);
        margin-left: 0;
      `};

    &:hover {
      color: var(--color-blue);
    }
  }
`;
/**
 * @todo nav? ol?
 */
export const NavLinkList = styled.div `
  flex: 1;
  display: flex;
  flex-direction: column;
  ${SidebarPageLink} {
    padding: var(--spacing-medium);
    @font (18,semi);
    color: var(--color-light-grey);
  }
`;
export const MobileMenuTopPanel = styled.div `
  width: 100%;
`;
export const MobileMenuBottomPanel = styled.div `
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
`;
/**
 * === moved from MobileMenuSidebar ===
 */
// @todo !!!!! FIX THIIS
// ${(props: {isVisible: boolean}) =>
//   (application.isModernBrowser || !application.isOldBadBrowser) &&
//   styled.css `
//     display: flex;
//     transition: transform 300ms ease-in-out;
//     ${(props: {isVisible: boolean}) =>
//   props.isVisible === false &&
//       styled.css `
//         transform: translateX(-100%) translateY(0);
//       `};
//     ${(props: {isVisible: boolean}) =>
//   props.isVisible === true &&
//       styled.css `
//         transform: translateX(0) translateY(0);
//       `};
//   `};
// ${(props: {isVisible: boolean}) =>
//   application.isOldBadBrowser &&
//   styled.css `
//     ${(props: {isVisible: boolean}) =>
//   props.isVisible === false &&
//       styled.css `
//         display: none;
//       `};
//     ${(props: {isVisible: boolean}) =>
//   props.isVisible === true &&
//       styled.css `
//         display: initial;
//       `};
//   `};
export const MobileMenuSidebarWrap = styled.aside `
  display: flex;
  transition: transform 300ms ease-in-out;
  ${(props) => props.isVisible === false &&
    styled.css `
      transform: translateX(-100%) translateY(0);
    `};
  ${(props) => props.isVisible === true &&
    styled.css `
      transform: translateX(0) translateY(0);
    `};

  position: fixed;
  z-index: 70;
  top: 0;
  left: 0;
  min-height: 100vh;
  background: var(--color-black);
`;
// @todo --- this I think is hiding the cart...
// @todo !!!!!! USE OVERLAY
export const Overlay = styled.div `
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.2);

  /* cursor showing left arrow */
  cursor: w-resize;

  /* @todo the other overlay does this but with animation */
  ${(props) => props.isVisible === false &&
    styled.css `
      display: none;
    `};
`;
// StyledHeaderAccountLoginLogout
// styled(HeaderAccountLoginLogout)
export const StyledHeaderAccountLoginLogoutWrap = styled.div `
  display: flex;
  flex-direction: row;
  button,
  span,
  a {
    align-items: center;
    display: flex;
    color: var(--color-pure-white);
  }
  a span {
    font: 400 1rem 'Roboto', Arial, Helvetica, sans-serif;
  }
  a span,
  .separator {
    color: var(--color-pure-white);
  }
  .separator {
    display: flex;
    align-items: center;
  }
`;
import { MyAccountButtonAdapter } from './renderProps';
import { LocaleModalTrigger as HeaderLocale, TopBarLinkCurrency, TopBarLinkCountry, } from '@skava/packages/features/Locale';
import { SeparatorElement as Separator } from '@skava/packages/ui';
/**
 * @todo convert to non className
 */
export const MyAccountButton = styled(MyAccountButtonAdapter) `
  .svg-icon-account {
    path {
      fill: var(--color-pure-white);
    }
  }
`;
export const LanguageButton = styled(HeaderLocale) `
  ${Separator} {
    padding: 0 .5rem;
  }
  ${Separator}, ${TopBarLinkCurrency}, ${TopBarLinkCountry} {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-black);
    &:hover {
      color: var(--color-black);
    }
  }
`;
//# sourceMappingURL=styled.js.map