/**
*
*  Custom overrides for Google Search search-results page
*  Author: Wesley Zajicek - https://github.com/wdzajicek
*
*/
// ===================================================== //
//  IMPORTANT! (pun intended):                           //
//                                                       //
//    Assume that ANY `!important` used in this file is  //
//    required for the styling to work correctly!        //
//                                                       //
//    i.e. DO NOT DELETE ANY `!important;`'s BELLOW      //
//                                                       //
// ===================================================== //
$color-link-visited: #3600b3;
// The pagination of the search results (at the bottom)
.gsc-results .gsc-cursor-box .gsc-cursor-page {
  background-color: rgba(0,0,0,0.09) !important;
  border-width: thin;
  border-style: solid;
  border-color: #666;
  border-radius: 5px;
  color: $grey-1 !important;
  padding: .25rem 1rem;
}
// The active page in the search result pagination
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
  background-color: rgba(0,0,0,0.25) !important;
  color: $black !important;
  text-decoration: underline !important;
}
// One of the outer-most elements of the search results
.gsc-control-cse {
  font-family: $font-family-paragraph !important;
  counter-reset: result;
}
// Outermost div for each search result
.gsc-webResult.gsc-result {
  border-bottom: solid thin #0b0e10 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 630px;
  padding-left: .75rem !important;
  padding-right: .75rem !important;
}
// Parent element of the search result's title
.gsc-thumbnail-inside {
  margin-left: 32px;
}
// Custom styling to make a counter before each title (like in newsroom)
.gsc-thumbnail-inside::before {
  background-color: $primary-blue;
  border-radius: 50%;
  border-color: #0b0e10;
  border-style: solid;
  border-width: 1px;
  color: $white;
  counter-increment: result;
  content: counter(result);
  display: block;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  margin-left: -32px;
  line-height: 24px;
  position: absolute;
  text-align: center;
  width: 26px;
}
// Font size for smaller text—description pagination
.gsc-control-cse,
.gsc-control-cse .gsc-table-result {
  font-size: .99rem !important;
}
// Larger font-sizes
.gsc-control-cse .gs-spelling,
.gsc-control-cse .gs-result .gs-title,
.gsc-control-cse .gs-result .gs-title * {
  font-size: 1.125rem !important;
}
// Title of the page/doc that is clicked
.gs-result .gs-title,
.gs-result .gs-title *,
.gs-result .gs-title a.gs-title b,
.gcsc-find-more-on-google {
  color: $color-blue-reboot !important;
}
// Hover effect for the search results title/link
.gs-result .gs-title a.gs-title:hover,
.gs-result .gs-title a.gs-title:hover b {
  color: $color-blue-reboot-hover !important;
  text-decoration: underline !important;
}
// Visited styles for the search results title/link
.gs-result .gs-title a.gs-title:visited,
.gs-result .gs-title a.gs-title:visited b {
  color: $color-link-visited !important;
}
// The little magnifying glass svg on the bottom-right
// of the results that says "🔍 Search for <SEARCH_TERM> on Google"
.gcsc-find-more-on-google-magnifier {
  fill: $color-blue-reboot !important;
}
// Breadcrumb for each search result
.gs-webResult div.gs-visibleUrl {
  color: $color-green-emerald !important;
}
// The parent element for the results breadcrumb
.gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
  display: inline-block;
  border: thin solid rgba(0,0,0,0.125);
  padding: 0 .25rem;
  border-radius: 5px;
  margin-top: .25rem;
}
// Description text for the search results
.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
.gs-fileFormatType {
  color: $grey-1 !important;
  margin-top: 6px;
  font-family: $font-family-paragraph !important;
}
.gs-bidi-start-align.gs-snippet b {
  font-weight: 700;
}
// Preview image for the search result
.gs-web-image-box .gs-image,
.gs-promotion-image-box .gs-promotion-image {
  height: 93px;
  margin-left: -18.25px;
  max-width: unset !important;
}
// Parent element of the preview image for search result
.gs-web-image-box,
.gs-promotion-image-box {
  background-color: $grey-1;
  border-radius: 50%;
  border-color: #ebebeb;
  border-style: solid;
  border-width: thin;
  float: right !important;
  height: 93px;
  margin-top: .25rem;
  margin-left: 1rem !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
  bottom: 20px;
  width: 93px !important;
}
// Specific styles for portrait oriented images
.gs-web-image-box-portrait .gs-image {
  height: 93px;
  margin-left: calc(100% / -16);
  transform: scale(1.2);
}
// Parent div of the pagination buttons
.gsc-cursor-box.gs-bidi-start-align {
  margin-top: 1.5rem !important;
}
// ======================================= //
//   Styling adjustments/additions to      //
//   search-page styling for darkMode      //
// ======================================= //
// .dark-mode gets added to <html> element 
.dark-mode {
  // Description of the search result
  .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
  .gs-fileFormatType {
    color: #969ca5 !important;
  }
  // Pagination buttons for extra results
  .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
    border-color: rgba(255,255,255,.25);
  }
  // The little magnifying glass svg on the bottom-right
  // of the results that says "🔍 Search for <SEARCH_TERM> on Google"
  .gcsc-find-more-on-google-magnifier {
    fill: #9fc0ed !important;
  }
  // Title/link of the search result
  .gs-result .gs-title,
  .gs-result .gs-title *,
  .gs-result .gs-title a.gs-title b,
  .gcsc-find-more-on-google {
    color: #9fc0ed !important;
  }
  // Title/link hover effect
  .gs-result .gs-title a.gs-title:hover,
  .gs-result .gs-title a.gs-title:hover b {
    color: #b0d1ff !important;
  }
  // Visited title links
  .gs-result .gs-title a.gs-title:visited,
  .gs-result .gs-title a.gs-title:visited b {
    color: #7382d7 !important;
  }
  // Top bar that shows the number of results and Sort by:...
  .gsc-above-wrapper-area {
    border-bottom-color: rgba(255,255,255,0.5)
  }
  // One of the outer-most parent elements of the results
  .gsc-control-cse.gsc-control-cse-en {
    background-color: transparent;
    border-color: rgba(255,255,255,0.25);
    border-radius: 5px;
  }
  // Outer-most element for each search result
  .gsc-webResult.gsc-result,
  .gsc-results .gsc-imageResult {
    background-color: #191d1f;
    border-color: rgba(255,255,255,0.125);
  }
  // Result stats: # of results and time
  .gsc-result-info,
  .gsc-orderby-label {
    color: #bababa;
  }
  // Pagination buttons of the extra results
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    background-color: #0b0e10;
    border-color: rgba(255,255,255,0.25);
    border-style: solid;
  }
  // Current page-button in the paginated results
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    color: #ebebeb !important;
    background-color: rgba(0,0,0,0.5) !important;
  }
  // Hover effect when mouse hovers a search result
  .gsc-webResult.gsc-result:hover {
    background-color: rgba(255,255,255,0.0125) !important;
  }
  // Outer-most element of each search result
  .gsc-webResult.gsc-result {
    border-bottom: solid 1px $white !important;
  }
  // Custom counter-circles to number results
  .gsc-thumbnail-inside::before {
    background-color: #9bb7dd;
    border-color: $white;
    color: #0b0e10;
  }
  // The "Sort by:" button
  .gsc-selected-option-container {
    background-color: #9fc0ed;
    border-radius: 4px;
    border-color: $white;
    border-width: 1px;
    border-style: solid;
    font-size: 13px !important;
    padding-bottom: 1.75rem;
    padding-left: .75rem !important;
    padding-right: 32px;
  }
  // The little carrot icon in the "Sort by:" button
  .gsc-control-cse .gsc-option-selector {
    right: 8px;
    top: 13px;
    transform: scale(1.5);
  }
  // The "Sort by:" menu
  .gsc-control-cse .gsc-option-menu {
    background-color: #0b0e10;
  }
  // Current selection in the "Sort by:" menu
  .gsc-option-menu-item-highlighted {
    background-color: #282828;
    color: $white;
  }
  .gs-bidi-start-align.gs-snippet b {
    color: #c4c4c4;
  }
}