// Additional styling for the search page
/* Code from https://dylanatsmith.com/wrote/styling-the-kbd-element */
kbd.search-modal-key-hints {
  border-radius: 0.25rem;
  border: 1px solid $search-modal-kbd-color;
  box-shadow: 0 2px 0 1px $search-modal-kbd-color;
  cursor: default;
  font-size: 0.9rem;
  line-height: 1.5;
  min-width: 0.75rem;
  text-align: center;
  padding: 0.1rem 0.3rem;
  position: relative;
  top: -1px;
}

.search-min-width-50 {
  min-width: 50%;
}

.search-min-height-100 {
  min-height: 100%;
}

.search-modal-card-body {
  max-height: calc(100vh - 15rem);
}

.search-result-link {
  border-radius: 0.7em;
  transition: all 300ms;
  border: 1px solid transparent
}

.search-result-link:hover, .search-result-link:focus {
  background-color: $search-result-link-hover;
  outline : none;
  border-color: $search-result-link-border-color;
}

.search-result-link .property-search-result-badge {
  transition: all 300ms;
}

.property-search-result-badge {
  padding: 0.15em 0.5em;
  font-size: 0.8em;
  font-style: italic;
  text-transform: none !important;
  line-height: 1.5;
  color: $search-result-badge-color;
  background-color: $search-result-badge-background-color;
  border-radius: 0.6rem;
}

.search-result-link:hover .property-search-result-badge, .search-result-link:focus .property-search-result-badge {
  color: $search-result-link-text-color;
  background-color: $search-result-link-text-background-color;
}

.search-filter {
  @extend .property-search-result-badge;

  color: $search-filter-color;
  background-color: $search-filter-background-color;
  transition: all 300ms;
}

.search-filter:hover, .search-filter:focus {
  color: $search-filter-color;
}

.search-filter-selected {
  color: $search-modal-selected-filter-color;
  background-color: $search-modal-selected-filter-background-color;
}

.search-filter-selected:hover, .search-filter-selected:focus {
  color: $search-modal-selected-filter-color;
}

.search-result-highlight {
  background-color: $search-result-highlight;
  color: black;
}

.search-divider {
  border-bottom: 1px solid $border;
}

.search-result-title {
  width: 85%;
  color: $search-result-title-text-color;
}

.search-result-code-title {
  font-size: 0.875rem;
  font-family: $family-monospace;
}

// Search modal custom scrollbar
#search-modal .modal-card-body::-webkit-scrollbar,
#search-modal .filter-tabs::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background-color: transparent;
}

#search-modal .modal-card-body::-webkit-scrollbar-thumb,
#search-modal .filter-tabs::-webkit-scrollbar-thumb {
  background-color: $search-modal-scrollbar-background-color;
  border-radius: 1rem;
}

#search-modal .modal-card-body::-webkit-scrollbar-track,
#search-modal .filter-tabs::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  background-color: transparent;
}

// Helpers for search modal
.w-100 {
  width: 100%;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}
