/**
 * @todo get rid of some divitus?
 */
import { application } from '@skava/state';
import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { Link } from '@skava/link';
export const StyledViewAll = styled(Link) `
  grid-area: viewall;
  @font (16,medium);
  padding-left: var(--spacing-medium);
  padding-bottom: 2px;
  color: var(--color-blue);
  &:hover {
    color: var(--color-blue);
  }
`;
export const NavigationWrapper = styled.div.attrs({
    // @todo NODE_ENV === 'test'
    'data-testid': 'desktop-nav-wrap',
    'className': 'menu',
}) `
  max-width: 100%;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  z-index: $layer-position-1;
  background-color: var(--color-pure-white);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0,0,0,0.12), 0 0.5rem 0.5rem 0 rgba(0,0,0,0.24);
  height: auto;
  min-height: rem(250);

  ${(props) => application.isModernBrowser &&
    styled.css `
      backface-visibility: hidden;
      transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      transition-property: transform;
      transform-origin: top center;
    `}

  ${(props) => !props.isVisible &&
    styled.css `
      ${application.isModernBrowser ? 'transform: translateY(-180%)' : 'display: none'};
      z-index: 1;
      opacity: 0.99;
    `}
  ${(props) => props.isVisible === true &&
    styled.css `
      z-index: 10;
      ${application.isModernBrowser ? 'transform: translateY(0)' : 'display: flex'};
    `}

  min-height: 100%;
  ${media.tabletOrSmaller `
    display: none;
  `}
`;
export const NavigationInnerWrapper = styled.div.attrs({
    className: 'menu-inner',
}) `
  margin: 0 auto;
  max-width: rem(1200);
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  background-color: var(--color-pure-white);
`;
export const Navigation = styled.nav.attrs({
    className: 'navigation',
    role: 'navigation',
}) `
  width: 20%;
  padding-right: 0;
  height: 100%;
  background-color: var(--color-white-grey);

  &:before {
    content: '';
    display: block;
    position: absolute;
    left: -100%;
    width: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--color-white-grey);
    z-index: 1;
  }
`;
export const NavList = styled.ul.attrs({
    className: 'nav',
}) `
  margin: 0;
  display: block;
`;
export const DropDownItemContainer = styled.div.attrs({
    className: 'dropdown-items-container',
}) `
  display: grid;
  grid-template-areas:
    'viewall viewall viewall viewall viewall'
    'navitem navitem navitem navitem navitem';
`;
export const NavItem = styled.li.attrs({
    className: 'nav-item',
}) ``;
export const InnerNav = styled.ul.attrs({
    className: 'inner-nav',
}) ``;
export const InnerNavItem = styled.li.attrs({
    className: 'inner-nav-item',
}) `
  padding-top: var(--spacing-small);
  padding-bottom: rem(3);
`;
export const DropdownImageWrapper = styled.div.attrs({
    className: 'dropdown-image-wrapper',
}) `
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0;

  .dropdown-image {
    object-fit: cover;
  }
`;
export const DropdownItemsWrapper = styled.div.attrs({
    className: 'dropdown-items-wrapper',
}) `
  flex-flow: column wrap;
  align-items: flex-start;
  align-content: flex-start;
  max-height: rem(600);
  white-space: nowrap;
  padding: 1rem 1rem 1rem 0;
  overflow-y: scroll;

  @media (max-width: 1200px) {
    padding-right: 1rem;
  }
`;
// @todo use Image
export const DropDownImage = styled.img.attrs({
    className: 'dropdown-image',
}) ``;
export const MenuWhiteSide = styled.div.attrs({
    className: 'menu-white-side',
}) `
  position: absolute;
  left: 30%;
  width: 100%;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
`;
//# sourceMappingURL=styled.js.map