@import (reference) url('./Dropdown.less');

.SearchResult {
  display: grid;
  height: 100%;
  position: relative;
}

.SearchResult-items {
  margin-top: calc(var(--gap-m) * 2 + var(--lineHeight-s) + 1px);
  overflow: auto;
  padding: var(--gap-l);
}

.SearchResult-selectionReset {
  .Dropdown-item;
  .Link.is-red;

  font-weight: normal;

  &::before {
    .Icon;
    .Icon.is-s;

    content: 'cancel';
    margin-right: var(--gap-xs);
  }
}

.SearchResult-actions {
  .SearchResult-selection {
    display: none;
    margin: var(--gap-m) 0 var(--gap-l);
    .Text.is-s();
  }

  .SearchResult-selectionCount {
    display: inline-block;
    font-weight: normal;
    margin-right: calc(var(--gap-m) + var(--gap-xs));
  }

  // Creates space between an active collection and other search actions
  & > .SearchResult-selectionCount {
    margin-bottom: var(--gap-l);
  }

  & > .SearchResult-action {
    margin: var(--gap-s) 0;
  }
}

.SearchResult-view {
  height: 100%;
}

.SearchResult-items-query {
  margin-right: 0;
}

.SearchResult-views {
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;

  > ul {
    .TabBar;

    > li {
      .TabBar-item;

      padding: 0;

      > a {
        display: inline-block;
        padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px)
          var(--gap-l);
      }
    }
  }

  .SearchResult & {
    position: absolute;
  }
}

.SearchResult-pagination {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--gap-l);
  padding: var(--gap-xs) var(--gap-l);

  ul.pagination {
    flex-wrap: wrap;
    min-height: var(--fontSize-xxl);

    > li:first-child {
      margin-right: var(--gap-l);
    }

    li.next {
      margin-left: var(--gap-s);
    }

    li.previous {
      margin-right: var(--gap-s);
    }

    li.SearchResult-pages {
      margin-left: 0;
    }
  }
}

.SearchResult-pages {
  display: none;
}

.SearchResult-page {
  border-radius: calc(var(--Text-height) / 2);
  color: var(--color-gray6);
  display: inline-block;
  min-width: var(--Text-height);
  padding: 0 var(--gap-xs);
  text-align: center;

  &.is-active {
    background-color: var(--color-gray3);
    color: var(--color-dominant7);
    text-decoration: none;
  }

  &:hover {
    color: var(--color-dominant7);
    text-decoration: none;
  }
}

.SearchResult-items .queryRestrictions,
.SearchResult-fields,
.SearchResult-sorts,
.SearchResult-imageHeightInput,
.SearchWidget:not(.AssignmentDeskDashboard) .SearchResult-limit {
  display: inline-block;
  margin-right: var(--gap-l);
  vertical-align: middle;
}

.SearchResult-sorts,
.SearchResult-limit {
  .ComboInput::before {
    border-bottom-width: 0;
  }
}

.SearchResult-list {
  clear: both;
  margin-top: var(--gap-l);

  &.is-processing {
    opacity: 0.3;
    pointer-events: none;
  }
}

.searchResult-print {
  padding: var(--gap-l);

  > h1 {
    padding-bottom: var(--gap-m);
  }
}

.SearchResult-images figure {
  display: inline-flex;
  height: 10vh;
  position: relative;

  > .Checkbox {
    color: var(--color-white);
    left: var(--gap-xs);
    position: absolute;
    top: var(--gap-xs);
    z-index: 10;

    ~ a {
      background: linear-gradient(
        160deg,
        var(--color-black),
        transparent calc(var(--Icon-size) * 2),
        transparent
      );
      bottom: 0;
      display: block;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  a {
    display: contents;
  }

  img {
    flex: auto;
    object-fit: cover;

    &:not([src]) {
      max-width: 30vw;
    }
  }

  figcaption {
    background: linear-gradient(
      to top,
      var(--color-black),
      var(--color-black) 25%,
      transparent
    );
    bottom: 0;
    color: var(--color-white);
    left: 0;
    overflow: hidden;
    padding: var(--gap-s) calc(var(--Icon-size) + var(--gap-xs) * 2)
      var(--gap-s) var(--gap-xs);
    position: absolute;
    right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ContentSummary-info {
    .Icon.is-s;

    bottom: 0;
    color: var(--color-white);
    margin: 0;
    position: absolute;
    right: 0;
  }
}

.SearchResult-images {
  .loop(@height) when (@height >= 0) {
    .loop(@height - 1);

    &[data-height='@{height}'] figure {
      height: (@height * 0.25vh + 5vh);
    }
  }

  .loop(100);
}

.SearchResult-imageHeightInput {
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
  width: 150px;

  &::before,
  &::after {
    .Icon;

    color: var(--color-gray5);
    top: 0;
  }

  &::before {
    content: 'zoom_out';
  }

  input[type] {
    margin: 0 var(--gap-xs);
  }

  &::after {
    content: 'zoom_in';
  }
}

.SearchResult-list > .SearchResult-images {
  display: flex;
  flex-wrap: wrap;
  margin: calc(0px - var(--gap-s) / 2);

  figure {
    flex: auto;
    margin: calc(var(--gap-s) / 2);
  }

  &::after {
    content: '';
    flex: 10000;
  }
}

.SearchResult-mixed > .SearchResult-images {
  overflow: auto;
  white-space: nowrap;

  figure:not(:last-child) {
    margin-right: var(--gap-s);
  }

  + .LinkTable {
    margin-top: var(--gap-l);
  }
}

.SearchResult-items > .SearchResult-images {
  figure:not(:last-child) {
    margin-right: var(--gap-s);
  }
}

.SearchResult-actions-wrapper {
  float: right;
  white-space: nowrap;

  .SearchResult-actions-toggle {
    .IconButton;

    background: transparent;
    border: 0;
    padding: 0;

    --IconButton-name: 'more_horiz';

    &[aria-expanded='true'] {
      .IconButton.is-focus;

      --IconButton-name: 'close';
    }
  }

  .SearchResult-actions-body {
    .SearchResult-action {
      margin: 0 calc(-1 * var(--gap-l));
    }

    .SearchResult-action-link {
      .Dropdown-item;

      &[href*='/searchAdvancedFull'] {
        display: none;
      }
    }

    li > h2 {
      .ComboInput-heading;

      background: transparent;
      font-weight: unset;
      line-height: var(--lineHeight-m);
      margin: 0 calc(-1 * var(--gap-l));
    }
  }

  .SearchResult-actions-toggle + .frame {
    .Dropdown;

    overflow: auto;
    padding: var(--gap-s) var(--gap-l);
  }

  .SearchResult-actions-toggle[aria-expanded='true'] + .frame {
    .Dropdown.is-open;

    & .SearchResult-selection {
      display: block;
    }

    &:not(:hover) {
      .SearchResult-selectionReset {
        &:focus {
          --Link-color: var(--color-red5);

          background: transparent;
        }
      }
    }
  }
}

.SearchResult-fullscreen {
  .IconButton;

  --IconButton-name: 'fullscreen';
}

.SearchResult-summaryField:not(:first-child)::before {
  background: var(--color-gray6);
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 2px;
  margin: var(--gap-xs);
  width: 2px;
}

.SearchResult-summaryField {
  color: var(--color-gray5);
  display: inline;
  font-size: var(--fontSize-s);
}

.SearchResult-summaryDescription {
  color: var(--color-gray5);
  font-size: var(--fontSize-s);
}

.SearchResult-summaryContainer {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (@mq-m) {
  .SearchResult-images figure {
    img {
      &:not([src]) {
        max-width: 17vw;
      }
    }
  }

  .SearchWidget.is-global .SearchResult-pagination {
    right: calc(var(--gap-l) + var(--Icon-size));
  }
}

@media (@mq-l) {
  .SearchResult-pages {
    display: inline-block;

    > ol {
      display: flex;
    }
  }
}

@media screen and (min-width: 1500px) {
  .SearchResult-pagination {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
  }
}

/* Loader overlay for search results (covers the page, dimmed background, centered spinner) */
.searchResult-loader-overlay {
  align-items: center;
  background: rgb(255 255 255 / 30%);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
}

.searchResult-loader-spinner::before {
  .Icon;

  --Icon-size: calc(var(--fontSize-xxl) * 1.5);

  animation: spin 1s linear infinite;
  content: 'autorenew';
  display: inline-block;
}
