@import '../../../../styles/common';
@import '../../variables';

$page-layout-when-not-partially-condensed-absolute: rem(743px);
$search-results-max-width: 70rem;
$search-results-min-width: 45rem;

.Search {
  position: absolute;
  z-index: z-index(search, $stacking-order);
  left: 0;
  right: 0;
  top: top-bar-height();
  height: calc(100vh - #{top-bar-height() + spacing(loose)});
  visibility: hidden;
  pointer-events: none;
  padding: 0;
  width: 100%;

  @include breakpoint-after($not-condensed-content) {
    top: top-bar-height() - spacing();
    left: auto;
    right: auto;
  }
}

.visible {
  visibility: initial;
  pointer-events: all;
}

.Overlay {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: $search-results-max-width;
  min-width: $search-results-min-width;
  max-height: 100%;

  > * {
    flex: 1 1 auto;
    width: 100%;
  }

  @include breakpoint-after($not-condensed-content) {
    position: relative;
  }

  @include page-content-when-not-fully-condensed {
    max-height: 60vh;
  }

  @include page-content-when-fully-condensed {
    min-width: 100%;
  }
}
