@import '../../../styles/core.scss';

.AlgoliaSearch {
  z-index: 1000;
  position: fixed;
  left: 0;
  right: 0;
  top: 80px;
  transform: scale(.975);
  transform-origin: 50% 0;
  display: flex;
  max-width: 900px;
  width: 100%;
  max-height: 40em;
  min-height: 25em;
  height: 80vh;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 5px;
  box-shadow:
    0 5px 20px rgba(0,0,0,.1),
    0 10px 30px rgba(0,0,0,.05);
  outline: none;
  opacity: 0;
  transition:
    opacity .15s cubic-bezier(.22,.61,.36,1),
    transform .15s cubic-bezier(.22,.61,.36,1);

  @media (max-width: 400px) {
    margin-left: 20px;
    margin-right: 20px;
    max-height: calc(100vh - 40px);
    top: 20px;
    width: auto;
  }

  @media (max-height: 813px) {
    max-height: calc(100vh - 40px);
    top: 20px;
  }

  @media (max-width: 940px) {
    max-width: calc(100vw - 40px);
  }

  @media (max-width: 700px) {
    flex-direction: column;
  }

  :global(.show-modal) & {
    opacity: 1;
    transform: scale(1);
  }

  // layout
  &-Col {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0; // prevent filter col from collapsing when results overflow
    overflow: hidden;
  }
}