// Thumbnail sizes for media items: search results, list entries, record views
/* #LESS>
$thumbnail-width-small:   60px;
$thumbnail-width-medium: 100px;
$thumbnail-width-large:  160px;
<#LESS */
/* #SCSS> */
$thumbnail-width-small:   60px !default;
$thumbnail-width-medium: 100px !default;
$thumbnail-width-large:  160px !default;
/* <#SCSS */

// record result list ol, ul that contains li.result
.record-list {
  list-style: none;
  padding: 0;
  margin: 0;

  &.search-results-solr-auth {
    .media-left, .media-right {
      display: none;
    }
  }
}

.js-result-list {
  position: relative;

  // Loading spinner
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    font-size: 150%;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(0,0,0,0.2);

    .loading-spinner {
      padding: 2rem;
      background-color: rgba(0,0,0,0.6);
      border-radius: $border-radius-large;
      color: $gray-lighter;
    }
  }
}

// Hide these on mobile
@media (max-width: 767px) {
  #datevispublishDatexWrapper,
  // Bulk action checkboxes:
  #search-cart-form .result .checkbox,
  // Search result bulk action buttons:
  #search-cart-form .bulkActionButtons,
  // Favorites bulk action buttons:
  form[name="bulkActionForm"] .bulkActionButtons { display: none; }
}

.searchHomeContent { @include clearfix(); }
.home-facet-list {
  padding-left: 0;
  padding-right: 1rem;
  list-style: none;
}
// Reset styling of hierarchical facets on the home page:
.home-facet.facet-tree li {
  line-height: inherit;
  padding-top: 0;
  padding-bottom: 0;
  border: 0;

  .facet-tree__toggle-expanded {
    line-height: inherit;
    padding: 0;
  }

  .facet {
    padding: 0;
    line-height: inherit;
    .badge {
      display: none;
    }
  }
}

@media (min-width: 768px) {
  .search-home-facets,
  .home-facet-container { display: flex; }
  .home-facet {
    flex: 1 1 100%;
  }
  .home-facet-list { flex: 0 1 100%; }
}

header .container.navbar { margin-bottom: 0; }

.search-sort, .search-result-limit { display: flex; }
.search-sort label, .search-result-limit label {
  line-height: $input-height-base;
  padding-right: .5rem;
}
.search-stats {
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .search-header { display: flex; }
  .search-stats { flex-grow: 1; }
  .search-controls { text-align: right; }
}

.versions-tab {
  .search-controls {
    padding-top: 0.5rem;
    padding-left: 1rem;
    text-align: left;
  }
  .search-header {
    .search-stats { flex-grow: 0; }
  }
}

.record-nav {
  @include clearfix();
  margin: 1rem 0;
  padding: 0;
}
.bulkActionButtons,
.action-toolbar,
.selection-controls-bar {
  gap: 0.25rem;
  align-items: center;
}
.bulkActionButtons {
  margin-block: 1rem;
}
.bulk-checkbox {
  padding-inline-end: 1rem;
  margin-top: .25rem;
}
.bulkActionButtons label { display: inline-block; }
.bulkActionButtons label input { margin-top: 2px; }

.action-toolbar,
.selection-controls-bar {
  margin: 0;
  padding: 0;
  list-style: none;

  .popover ul {
    list-style: disc;
    padding-left: 1em;
  }
}
.action-toolbar li,
.selection-controls-bar li {
  display: inline-block;

  .popover li {
    display: list-item;
    padding-left: 0.5em;
  }
}

@media (max-width: 767px) {
  .grid { min-height: 250px; }
}
.result {
  display: flex;
  padding-top: 1rem;

  .record-checkbox,
  .record-number { display: none; }

  .title,
  .result-author,
  .fulltext {
    display: inline-block;
  }

  .title {
    font-weight: bold;
  }

  .list-tab-content.record .img-col { display: none; }
  .list-tab-content.record .info-col { width: 100%; }
  .format {
    @extend .label;
    @extend .label-info;
  }

  .checkbox-select-item { float: left; }

  .dropdown-menu.qrcode {
    min-width: inherit;
  }

  @media (max-width: 767px) {
    a {
      max-width: 100%;
      text-decoration: underline;
    }
  }
  @media (min-width: 768px) {
    .record-checkbox {
      display: block;
      flex: 0;
      cursor: pointer;
    }
    .record-number {
      display: block;
      flex: 0 2rem;
      text-align: center;
    }
  }
}
.record,
.result {
  .media {
    display: flex;
    flex: 1;
    margin: 0;
    padding-right: 10px;
    padding-left: 10px;
    overflow: visible;
  }
  .media-left,
  .media-right {
    flex: none;
    max-width: 25%;
    text-align: center;

    a {
      display: inline-block;
      max-width: 100%;
      text-align: center;
      white-space: nowrap;
      text-decoration: underline;
    }
    .rating-summary a {
      white-space: normal;
    }

    img {
      display: inline-block;
      width: auto;
      max-width: 100%;
      max-height: 300px;
      object-fit: contain;
    }

    @media (min-width: 768px) {
      &.small  { width: $thumbnail-width-small; }
      &.medium { width: $thumbnail-width-medium; }
      &.large  { width: $thumbnail-width-large; }
      & > a { width: 100%; }
    }
  }
  .media-left { margin-right: 10px; }
  .media-right { margin-left: 10px; }
  .media-body {
    flex: 1;
    width: unset;
    overflow: visible;
  }
}

.ajaxcover .cover-container {
  display: none;
}
.recordcover {
  white-space: normal;
  line-height: 1.15;
}

.result-body {
  padding: 0;
  padding-bottom: .25rem;
}

.result-body,
.media-body {
  h2 {
    font-size: unset;
    line-height: $line-height-base;
    margin: 0;

    .authors {
      display: block;
    }
  }
}

.btn-bookbag-toggle,
.result-links a {
  line-height: 1.5;
}

.result-links .alert { margin: 0; }
.result-formats { margin-bottom: .5rem; }

.btn-bookbag-toggle form { display: inline; }

.savedLists {
  @extend .alert;
  @extend .alert-info;
  padding: 0.4rem;
  display: none;

  ul {
    padding-left: 1rem;
  }
}

.result-citation-links {
  margin: 0.5rem 0;
}

@media (min-width: 768px) {
  .result-body {
    float: left;
    width: 75%;
  }
  .result-links {
    float: left;
    width: 25%;
    padding: 0;
  }
  .savedLists.loaded { display: block; }
}
body.rtl {
  @media (min-width: 768px) {
    .result-body,
    .result-links { float: right; }
  }
}
/* ------ EMBEDDED RESULTS STYLE ------ */
.result.embedded {
  .getFull {
    display: block;
    margin-left: -.5rem;
    padding-left: .5rem;
    border-left: 1px solid transparent;
  }
  .getFull.expanded {
    @extend .list-group-item;
    margin-top: -11px;
    padding-left: .5rem;
    border-top-left-radius: $border-radius-base;
    border-top-right-radius: $border-radius-base;
    &::before {
      content: '\25BC';
      position: absolute;
      right: 1rem;
      color: $gray;
    }
  }
  .loading {
    @extend .list-group-item;
    margin-left: .75rem;
    padding: 1rem;
    background: #fff;
  }
  .long-view {
    margin-left: -.5rem;
    padding: .5rem;
    border: 1px solid $list-group-border;
    background-color: #fff;
    border-bottom-left-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
  }
  .long-view .tab-content { padding: 0; }
  .list-tabs { margin-bottom: 0; }
  .list-tab-toggle { cursor: pointer; }
  .list-tab-content { padding: 1rem; }
}

/* ------ GRID VIEW ------ */
.search-grid::after {
  display: table;
  clear: both;
  content: '';
}
.grid-result {
  display: flex;
  float: left;
  width: 50%;

  .grid-body {
    flex: 1;
    h2 {
      font-size: inherit;
      line-height: $line-height-base;
      margin: 0;

      .title {
        display: inline-block;
        font-weight: bold;
      }
    }
  }
  .grid-checkbox {
    flex: 0 0 30px;
    min-width: 0;
  }
  .label,
  .format {
    display: inline-block;
    white-space: normal;
  }
}
.grid-large-break,
.grid-small-break { clear: both; }
@media (min-width: 992px) {
  .grid-result{ width: 25%; }
  .grid-small-break { display: none; }
}

.searchtools {
  h2 {
    display: inline-block;
    margin: 0;
    font-size: inherit;
    font-weight: bold;
    vertical-align: middle;
  }
  ul {
    display: inline-block;
    margin: 0;
    padding-left: 0;
    li {
      display: inline;
      &:not(:first-child):before {
        content: '\2013'; // n-dash
      }
      a {
        padding: 0 .5rem;
        white-space: nowrap;
      }
    }
  }
}

/* ------ COMBINED ------ */
// No sidebar in combined:
.template-dir-combined.template-name-results.vufind-offcanvas {
  margin: 0;
  padding: 0;
}

.combined-search-container.grid {
  margin-left: 1rem;
  margin-right: 1rem;

  .combined-list {
    overflow-wrap: anywhere;
  }
}

.combined-jump-links {
  margin-left: 1rem;
  margin-right: 1rem;

  // This is overridden via JS in combined/results-list.phtml
  visibility: hidden;

  ul {
    display: inline;
    list-style: none;
    padding-left: 0;

    li {
      // This is overridden via JS in combined/results-list.phtml
      display: none;

      white-space: nowrap;
      &:not(:first-child):before {
        content: '\2013'; // n-dash
      }
    }
  }
}

.combined-column {
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0;
}

@media (min-width: 768px) {
  .combined-search-container {
    display: flex;
    padding-left: 1rem;

    &.grid {
      display: grid;
      column-gap: 1rem;
      padding-right: 1rem;
      margin-left: 0;
      margin-right: 0;
      // grid-template-columns is set dynamically in stack-grid.phtml.
    }

    .result { margin-left: 0; }
    .result-body {
      float: none;
      width: auto;
    }
    .result-links { display: none; }
  }
  .combined-column {
    flex: 0 1 100%;
    margin-left: 0;
  }
}

.wikipedia img { margin-right: 1rem; }
.geoItem {
    font-size: .9em;
    margin: 0px 0px 10px;
}
.title-in-heading {
  font-size: inherit;
  font-style: italic;
}

/* ------ TOP FACETS ------ */
.top-title {
  display: inline-block;
  padding-top: .5rem;
  padding-left: .5rem;
  font-weight: bold;
  color: #000;
}
.top-title .fa {
  width: 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  .top-title { padding-top: 0; }
  .top-title .fa { display: none; }
  .top-facets .collapse {
    display: block;
    height: auto !important;
  }
}

/* ------ CURRENT FILTERS ------ */
.active-filters {
  clear: both;
  display: flex;
  gap: 1rem;
  align-items: start;
  margin-block-start: 0.5rem;

  .retain-filters {
    float: right;
  }
  .checkbox {
    flex: 1;
    white-space: nowrap;
  }
  .filters-toggle {
    flex: 1;
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    &::after {
      content: '\25B2';
    }
    &.collapsed::after {
      content: '\25BC';
    }
    @media (min-width: $screen-sm-min) {
      float: left;
    }
  }
  .filters {
    flex: 10 1 auto;
    margin-block-start: 0.25rem;

    .collapse {
      display: none;
      .in {
        display: inline-block;
      }
    }

    .checkbox label {
      display: inline-block;
      padding: 10px 0px;
      @media (max-width: $screen-sm-min) {
        float: right;
        padding: 0px;
      }
    }
    .filters-term {
      font-size: 0.8em
    }
    .filter-value {
      display: inline-block;
      margin-block: 5px;
      padding: 2px 8px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      text-decoration: none;
      background: $list-group-active-bg;

      &:focus {
        box-shadow: 0 0 0 2px #000;
      }
    }
    .checkbox {
      display: inline;
      padding-left: 0;
      padding-right: 0;
      @media (min-width: $screen-sm-min) {
        padding-right: 20px;
      }
    }
    .title-value-pair {
      display: inline-block;
      margin-inline-end: 0.5rem;
    }
  }
}

.toolbar-btn,
.record-nav .cart-add,
.record-nav .cart-remove,
.reset-filters-btn,
.clear-selection {
  border: 0;
  color: #555;
  text-decoration: none;
  background-color: rgba(0,0,0,.05);
  border-radius: 4px;

  &:hover {
    background-color: rgba(0,0,0,.1);
  }
}

.toolbar-btn,
.record-nav .cart-add,
.record-nav .cart-remove,
.reset-filters-btn {
  @extend .icon-link;
  gap: 0.25rem;
  margin-bottom: 4px;
  margin-top: 4px;
  padding: .5rem 1rem;
}
.reset-filters-btn {
  flex: none;
}

.toolbar-btn {
  display: inline-block;
  vertical-align: middle;
}

.clear-selection{
  font-weight: 700;
  padding: .25rem .4rem .15rem .4rem;
  flex-basis: 100%;
}

.active-filters .filters a.filter-value:hover,
.active-filters .filters a.filter-value:focus {
  color: #fff;
  text-decoration: line-through;
  background-color: $state-danger-text;
}
.search-filter-dropdown {
  display: inline-block;
  .btn {
    color: #fff;
    background: $list-group-active-bg;
    font-weight: 600;
    vertical-align: baseline;
  }
  .btn::after {
    content: "\f107";
    font-family: "FontAwesome";
  }

  .dropdown-menu {
    .filters-term {
      display: block;
      text-align: center;
    }
    .filter-value {
      display: flex;

      .text {
        flex-grow: 1;
        margin-right: 0.5em;
      }
      a {
        flex-shrink: 0;
        margin: 0;
      }
    }
  }
}

.search-schedule-header {
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}

.search-history-table {
  @extend .table;
  @extend .table-striped;
  @extend .table-responsive;

  td.history_results, td.history_actions {
    word-wrap: normal;
  }
}
table.search-history-table {
  table-layout: auto;

  @media screen and (min-width: 768px) {
    tbody > tr > td { vertical-align: middle; }
    .history_time {
      width: 20%;
    }
  }
}

.nav.searchbox{
  width: 100%;
}

.searchForm {
  margin: 0.2rem 0;
  padding: 0;
  width: 100%;

  .searchForm-query {
    position: relative;

    @media (min-width: 768px) {
      display: inline-block;
    }

    #searchForm_lookfor {
      padding-right: 38px;
    }

    /* Adjust padding for the virtual keyboard button */
    @media (min-width: 401px) {
      #searchForm_lookfor.with-keyboard-selection {
        padding-right: 80px;
      }
    }

    #searchForm_controls {
      position: absolute;
      top: 0;
      right: 3px;
      z-index: 4;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 0.2rem;
    }

    #searchForm-reset {
      width: 2em;
      border: none;
      border-radius: 50%;
      background-color: $gray-lighter;
      margin: 0;
      padding: 2px;
      font-size: 1em;
      cursor: pointer;
    }
  }
}

/* Hide virtual keyboard on narrow screens */
@media (max-width: 400px) {
  .keyboard-selection {
    display: none;
  }

  .show-keyboard, .simple-keyboard {
    display: none;
  }
}

/* Break early to prevent table overflow */
@media (max-width: 991px) {
  .template-dir-search.template-name-history {
    .mainbody,
    .sidebar {
      float: none;
    }
    .mainbody {
      width: auto;
      padding: 0;
      margin-bottom: 1rem;
    }
    &:not(.vufind-offcanvas.active) .sidebar {
      width: auto;
    }
  }
}

/* Simple pagination */
.pagination-simple {
  margin: 0;
  text-align: inherit;
  li {
    display: inline-block;
    &.page-prev a {
      margin-right: 0.5rem;
    }
    &.page-next a {
      margin-left: 0.5rem;
    }
  }
  .pager-text {
    margin: 0;
    span {
      border: 0;
      padding: 0;
      color: $text-color;
      &:hover {
        color: $text-color;
        background-color: transparent;
      }
    }
  }
}

.querySuggestions > h2, .spellingSuggestions > h2 {
  font-size: unset;
  line-height: $line-height-base;
  margin: 0;
}

.spellingSuggestions .terms > li {
  .suggestions {
    padding-inline-start: 0;
    display: inline;
    li {
      display: inline;
      list-style: none;
    }
    li:not(:last-child)::after {
      content: ', ';
    }
  }
}

.callnumAndLocation .statusItemsHoldingsTextFields {
  border: none;
  padding: 0;
  padding-left: 15px;
}

.callnumAndLocation .itemWithAdditionalHoldingFields td {
  border-bottom-width: 0;
}