import * as React from 'react';
import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { Button, ArrowIcon, Main } from '@skava/packages/ui';
/**
 * @todo grid?
 */
const MyAccountWrapper = styled.div `
  position: relative;
  min-height: 100vh;
  display: flex;
  max-width: var(--spacing-max-width);
  margin: auto;
  width: 100%;

  ${media.phoneOrSmaller `
    flex-direction: column;
    flex-wrap: wrap;
    > button {
      padding-left: 0;
      padding: 0.75rem 0;
      svg.arrow-left {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        width: 1.5rem;
        height: 1.5rem;
      }
    }
    span.button-text {
      color: var(--color-black);
    }
  `}
`;
/**
 * @todo @@perf @@dom - simply use this as `styled(MyAccountSection)` in each section...
 */
const MyAccountSection = styled(Main) `
  width: 75%;
  flex: 1;
  padding-left: var(--spacing-small);
  ${media.desktopOrSmaller `
    padding-right: var(--spacing-small);
  `}
  ${media.tabletOrSmaller `
    width: calc(100% - 253px);
  `}
  ${media.phoneOrSmaller `
    flex: 0 0 100%;
    width: 100%;
    padding: 0;
  `}
`;
const AccountBackButton = (props) => (React.createElement(Button, Object.assign({ value: props.title, icon: React.createElement(ArrowIcon, { left: true }), onClick: props.onClick }, props)));
const AccountBackButtonWrap = styled(AccountBackButton) `
  display: flex;
  align-items: center;
  padding: var(--spacing-medium) var(--spacing-small);
  @font (14,semi);
  svg.arrow-left {
    padding-right: var(--spacing-medium);
  }
  ${media.tabletOrLarger `
    display: none;
  `}
`;
export { MyAccountWrapper, MyAccountSection, AccountBackButtonWrap, AccountBackButton };
//# sourceMappingURL=styled.js.map