import { styled } from 'styleh-components';
import React from 'react';
import { media } from '@skava/styleh-toolset';
import { Button } from 'atoms/Button';
const item = '.sk-suggested-item, sk-recent-suggestion .sk-suggested-item';
const itemAt = (index) => `.sk-suggested-item:nth-child(${index}), sk-recent-suggestion .sk-suggested-item:nth-child(${index})`;
const showAnimation = styled.css `
  ${item} {
    transition: transform 1s ease-in-out;
    transform: translateX(-100%);
  }
  ${itemAt(1)} {
    transition-delay: 0s;
  }
  ${itemAt(2)} {
    transition-delay: 0.05s;
  }
  ${itemAt(3)} {
    transition-delay: 0.1s;
  }
  ${itemAt(4)} {
    transition-delay: 0.15s;
  }
  ${itemAt(5)} {
    transition-delay: 0.2s;
  }
  ${itemAt(6)} {
    transition-delay: 0.25s;
  }
  ${itemAt(7)} {
    transition-delay: 0.3s;
  }
`;
const showHide = styled.css `
  .sk-search-suggestion-dropdown-component {
    transition: transform 0.24s ease-in-out, opacity 0.24s ease-in-out;
  }

  .hidden .sk-search-suggestion-dropdown-component {
    transform: translateY(-100%) scale(1, 0);
    opacity: 0;

    ${item} {
      transform: translateX(-100%);
    }
  }
  .visible .sk-search-suggestion-dropdown-component {
    opacity: 1;
    transform: translateY(-var(--spacing-small)) scale(1, 1);

    ${media.phoneOrSmaller `
      transform: translateY(2.5rem) scale(1, 1);
    `}

    ${item} {
      transform: translateX(0);
    }
  }
`;
const SearchDropdownComponent = styled.div.attrs({
    className: 'sk-search-suggestion-dropdown-component',
}) `
  position: absolute;
  z-index: 60;

  ${media.phoneOrSmaller `
    left: -var(--spacing-medium);
    right: -var(--spacing-medium);
    top: rem(66);
    width: auto;
  `}

  top: rem(1);
  right: 0;
  width: 100%;

  ${media.tabletOrSmaller `
    left: 0;
    right: 0;
    top: rem(1);
  `}
`;
const SearchBarWrap = styled.div.attrs({
    className: 'search-widget-component',
    role: 'search',
}) `
  ${showHide};
  width: rem(290);
  ${media.phoneOrSmaller `
    min-width: 3rem;
    width: auto;
  `}

  .sk-cross-icon {
    width: rem(18);
    height: rem(18);
    position: relative;
    z-index: 50;
    padding: 0;
    background-color: var(--color-pure-white);
    display: flex;
    cursor: pointer;
    border: 0;
  }
  .sk-clear-all-suggestion {
    align-self: flex-end;
    cursor: pointer;
    font-size: rem(11);
    color: var(--color-dark-grey);
  }
  .close-svg-parts {
    stroke: var(--color-light-grey);
  }

  ${showAnimation};
  position: relative;
  .virtual-portal {
    position: relative;
  }
  .visible .sk-search-suggestion-dropdown-component {
    transform: translateY(0);
  }
  ${media.tabletOrSmaller `
    .search-box {
      height: 100%;
      width: 100%;
    }
    .sk-search-form {
      height: 100%;
    }
  `}
  ${media.desktopOrLarger `
    .sk-search-icon-wrap {
      position: absolute;
    }
  `}
`;
const SuggestedItemContainer = styled.div.attrs({
    'data-qa': 'qa-search-term',
    'className': 'sk-suggested-item-value',
}) `
  padding: var(--spacing-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  @font (16, regular);
`;
const SearchContext = styled.span.attrs({
    className: 'search-suggestion-context search-suggestion-item context',
}) `
  @font (16, regular);
  color: var(--color-black);
`;
const SearchTerm = styled.span.attrs({
    className: 'search-suggestion-term search-suggestion-item term',
}) `
  @font (16, bold);
  color: var(--color-black);
`;
const SearchHighlightItem = styled.label.attrs({
    className: 'sk-recent-search-highlight',
}) `
  margin-bottom: 0;
  @font (16, semi);
  color: var(--color-black);
  text-transform: capitalize;
`;
const SuggestionWrap = styled.div.attrs({
    className: 'sk-suggestions',
}) `
  position: absolute;
  z-index: 20;
  top: 0;
  width: 100%;
  background-color: var(--color-pure-white);
  opacity: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  ${media.phoneOrSmaller `
    padding: 0;
  `}
`;
const SuggestionItem = styled.div.attrs({
    'data-qa': 'qa-search-suggestion',
    'className': 'sk-suggested-item',
    'role': 'listitem',
}) `
  width: 100%;
  text-align: left;
  align-items: baseline;
  height: auto;
  position: relative;
  &:not(:last-child)::after {
    content: '';
    position: absolute;
    left: var(--spacing-small);
    bottom: 0;
    right: var(--spacing-small);
    height: rem(1);
    background-color: var(--color-pure-white);
  }
`;
const SearchSuggestionWrap = styled.div.attrs({
    className: 'sk-search-suggestions',
}) `
  .different-context {
    font-weight: 200;
  }
`;
const RecentList = styled.div `
  .search-suggestion-term {
    @font (16, regular);
  }
  .button-atom .svg-icon-close,
  .button-atom .svg-icon-close path {
    fill: var(--color-light-grey);
  }
`;
const SearchResult = styled.div.attrs({
    className: 'sk-search-results',
}) `
  max-height: rem(300);
  overflow: hidden;
  overflow-y: auto;

  ${media.phoneOrSmaller `
    width: 100%;
  `}
`;
const SearchBeforeSection = styled.div ``;
const SearchSuggestionItemWrap = styled.div ``;
const SearchSuggestionItem = styled.div ``;
const SearchTextBar = styled.span ``;
const SearchPre = styled.span.attrs({
    className: 'search-suggestion-pre search-suggestion-item pre',
}) `
  color: var(--color-black);
  font-weight: normal;
`;
const SearchLabel = styled.div.attrs({
    'data-qa': 'qa-recent-search',
    'className': 'sk-recent-search-label',
}) `
  padding: rem(10) rem(14);
  line-height: rem(21);
  background-color: var(--color-white-grey);
  display: flex;
  justify-content: space-between;
`;
const SearchSuggesion = styled.div.attrs({
    className: 'sk-recent-suggestion',
}) `
  .sk-suggested-item,
  .sk-suggested-item-value {
    font-size: rem(13);
    color: var(--color-light-grey);
  }
`;
const ClearButton = (props) => (React.createElement(Button, Object.assign({ className: "sk-clear-all-suggestion" }, props)));
export { SearchDropdownComponent, SearchBarWrap, SuggestedItemContainer, SearchContext, SearchTerm, SearchHighlightItem, RecentList, SuggestionWrap, SuggestionItem, SearchSuggestionWrap, SearchResult, SearchBeforeSection, SearchSuggestionItemWrap, SearchSuggestionItem, SearchTextBar, SearchPre, SearchLabel, SearchSuggesion, ClearButton, };
//# sourceMappingURL=_elements.js.map