@use '../variables/colours' as *;
.modal-search-block {
  border: 1px solid $color-grey;
  margin-bottom: 10px;
  padding: 10px 5px;
}

.modal-search .modal-dialog {
  /* Make the dialog 80% of the screen height/width */
  width: 80%;
  // height: 80%;
}
.modal-search .modal-body {
  /* 100% = dialog height, 50px = header (27.5px) + footer (21px) */
  // max-height: calc(80% - 50px);
  max-height: 450px;
  overflow-y: scroll;
}

.modal-search-results-pagination {
  margin-bottom: 10px;
}

.modal-search-result {
  margin-top: 5px;
  padding-bottom: 5px;

  .modal-search-result-label {
    font-size: 1.6rem;
    font-weight: 500;
  }

  .tags > .tag {
    display: inline-block;
    margin: 5px 2px;
  }
  .tags .facet {
    border: 1px solid $color-blue;
    border-radius: 25px;
    padding: 2px 5px;
  }

  div {
    margin-bottom: 5px;
  }

  dl {
    margin-left: 20px;

    dd {
      margin-bottom: 5px;
    }
  }
}

.modal-search-results .modal-search-result {
  border-bottom: 1px solid $color-grey;
}

/* the 'Select' button displayed in the modal dialog */
.modal-search-result .modal-search-result-selector,
.modal-search-result .modal-search-result-unselector {
  display: inline-block;
  background-color: $color-white;
  border-radius: 25px;
  padding: 2px 5px;
  font-size: 1.3rem;
  text-decoration: none;
}
.modal-search-result .modal-search-result-selector {
  background-color: $color-green;
  color: $color-white;
}
.modal-search-result .modal-search-result-unselector {
  border: 1px solid $color-red;
  color: $color-red;
}
