import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { Button } from '@skava/packages/ui';
export const AccountCategoryTitle = styled.span `
  @font (16, semi);
  color: var(--color-black);
  margin-left: var(--spacing-medium);
  width: 78%;
`;
export const StyledButton = styled(Button) `
  background-color: var(--color-pure-white);
  color: var(--color-black);
  font: $font-breadcrumbs;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  ${media.desktopOrLarger `
    height: rem(56);
  `}

  padding-right: rem(14);
  position: relative;

  ${media.phoneOrSmaller `
    &::after {
      content: '';
      position: absolute;
      cursor: pointer;
      top: 0;
      right: var(--spacing-medium);
      bottom: 0;
      margin: auto;
      width: 7.5px;
      height: 13px;
    }
  `}

  ${(props) => props.isActive === true &&
    styled.css `
      ${AccountCategoryTitle} {
        color: var(--color-pure-white);
      }
      background: var(--color-blue);
      font: $font-store-list-store-title-active;
    `}
`;
import { RightArrow } from '@skava/packages/ui';
export const StyledRightArrow = styled(RightArrow) `
  margin-top: rem(2);
  ${(props) => props.isActive === true &&
    styled.css `
      display: none;
    `}
`;
export const MyAccountSideBarWrap = styled.aside `
  min-height: 100%;
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing2x);
  z-index: 1;
  background-color: var(--color-pure-white);
  ${media.phoneOrSmaller `
    border-radius: 4px;
    padding: 0;
    box-shadow: none;
  `}
  ${media.tabletOrLarger `
    margin-left: var(--spacing-small);
    z-index: 0;
  `}
  ${media.desktopOrLarger `
    width: rem(294);
  `}
  @media (max-width: 1220px) and (min-width: 1024px) {
    margin-left: 1rem;
  }
  @media (min-width: 1220px) {
    margin-left: 0rem;
  }
  flex: 0 1 rem(245);
  ${media.desktopOrLarger `
    flex: 0 1 rem(294);
  `}
  ${media.phoneOrSmaller `
    flex: 0 0 100%;
  `}
  ${StyledButton} {
    padding: var(--spacing-medium) var(--spacing-big);
  }
`;
// was 'account-category-image'
export const AccountCategoryImage = styled.div `
  width: rem(25);
  height: 1.5rem;
  padding-top: rem(2);

  ${(props) => props.isActive === true && styled.css ``}
`;
import { ExtendedMaterialIcon } from '@skava/packages/ui';
export const StyledMaterialIcon = styled(ExtendedMaterialIcon) `
  svg {
    width: 100%;
    height: 100%;
    &,
    circle {
      /* fill: var(--color-pure-white); */
    }
    g > path {
      ${(props) => props.isActive === true &&
    styled.css `
          fill: var(--color-pure-white);
        `};
    }
  }
`;
export const StyledPeopleIcon = styled(StyledMaterialIcon).attrs({
    type: 'people_outline',
}) `
  path {
    stroke: transparent;
  }

  circle {
    stroke: var(--color-pure-white);
    fill: var(--color-pure-white);
  }
`;
export const StyledPrivacyIcon = styled(StyledMaterialIcon).attrs({
    type: 'settings',
}) `
  svg circle {
    fill: ${(props) => props.isActive === true ? 'var(--color-blue)' : 'var(--color-pure-white)'};
    stroke: ${(props) => props.isActive === true ? 'var(--color-blue)' : 'var(--color-pure-white)'};
  }
`;
export const StyledSideBarNav = styled.nav ``;
//# sourceMappingURL=styled.js.map