// Google Programmable Search Engine. Based on:
//
// - https://www.google.com/cse/static/style/look/v4/default.css
// - https://www.google.com/cse/static/element/6467658b9628de43/default+en.css
//
// cSpell:ignore gcsc tabh refinementhActive subelements

@if $enable-dark-mode {
  /* ------------------------------------------------------------
    * TD THEME VARIABLES
    * ------------------------------------------------------------ */

  :root {
    /* Thematic alias vars for Google Programmable Search customization */
    --td-gcs-primary: var(--bs-link-color, var(--bs-primary));
    --td-gcs-secondary: var(--bs-secondary-color);
    --td-gcs-bg: var(--bs-body-bg);
    --td-gcs-text: var(--bs-body-color);
    --td-gcs-border: var(--bs-border-color);
    --td-gcs-success: var(--bs-success);
    --td-gcs-radius: var(--bs-border-radius);
  }

  .gs-web-image-box {
    margin-right: 0.5rem !important;
  }

  /* ------------------------------------------------------------
  * Google Programmable Search – base typography (light and dark themes)
  * ------------------------------------------------------------ */

  .gsc-control-cse {
    font-family: var(--bs-body-font-family, system-ui, sans-serif) !important;
    font-size: var(--bs-body-font-size, 1rem) !important;
    line-height: var(--bs-body-line-height, 1.5) !important;
    color: var(--bs-body-color, #212529) !important;
  }

  /* Sub-elements: maintain consistent sizing */
  .gsc-tabHeader,
  .gsc-orderby,
  .gsc-result-info,
  .gs-snippet,
  .gsc-refinementHeader,
  .gsc-result {
    font-size: var(--bs-body-font-size, 1rem) !important;
    line-height: var(--bs-body-line-height, 1.5) !important;
  }

  /* Ensure Sort-by UI inherits the same size */
  .gsc-orderby,
  .gsc-orderby-label,
  .gsc-selected-option-container,
  .gsc-selected-option,
  .gsc-option-menu-item {
    font-size: var(--bs-body-font-size, 1rem) !important;
    line-height: var(--bs-body-line-height, 1.5) !important;
  }

  /* Slightly larger for result titles */
  .gs-title {
    font-size: calc(var(--bs-body-font-size, 1rem) * 1.1) !important;
    line-height: 1.4 !important;
  }

  /* ------------------------------------------------------------
  * Google Programmable Search – dark-mode overrides
  * ------------------------------------------------------------ */

  [data-bs-theme='dark'] {
    /* ------------------------------------------------------------
    * ROOT / GENERAL
    * ------------------------------------------------------------ */
    .gsc-control-cse,
    .gsc-control-cse .gsc-control-wrapper-cse {
      background-color: var(--td-gcs-bg) !important;
      color: var(--td-gcs-text) !important;
      border: 0 !important;
    }

    .gsc-above-wrapper-area,
    .gsc-tabsArea,
    .gsc-refinementsArea {
      border-bottom: 1px solid var(--td-gcs-border) !important;
    }

    /* ------------------------------------------------------------
    * SEARCH BOX
    * ------------------------------------------------------------ */
    .gsc-search-box {
      background: transparent !important;
    }

    .gsc-input-box,
    td.gsc-input {
      background-color: var(--td-gcs-bg) !important;
      border: 1px solid var(--td-gcs-border) !important;
    }

    input.gsc-input,
    input.gsc-input:focus {
      background-color: transparent !important;
      color: var(--td-gcs-text) !important;
      box-shadow: none !important;
    }

    input.gsc-search-button,
    input.gsc-search-button-v2 {
      background-color: var(--td-gcs-primary) !important;
      border-color: var(--td-gcs-primary) !important;
      color: #fff !important;
      border-radius: var(--td-gcs-radius);
    }

    /* ------------------------------------------------------------
    * TABS / REFINEMENTS
    * ------------------------------------------------------------ */
    .gsc-tabHeader {
      background: transparent !important;
    }

    .gsc-tabHeader.gsc-tabhInactive {
      color: var(--td-gcs-secondary) !important;
      border-bottom: 2px solid transparent !important;
      cursor: pointer;
    }

    .gsc-tabHeader.gsc-tabhActive,
    .gsc-refinementHeader.gsc-refinementhActive {
      border-bottom: 2px solid var(--td-gcs-primary) !important;
      color: var(--td-gcs-primary) !important;
      background: transparent !important;
    }

    .gsc-refinementHeader {
      color: var(--td-gcs-secondary) !important;
    }

    /* ------------------------------------------------------------
    * RESULTS
    * ------------------------------------------------------------ */
    .gsc-results,
    .gsc-results .gsc-result,
    .gsc-webResult.gsc-result,
    .gsc-imageResult-classic {
      background-color: var(--td-gcs-bg) !important;
      color: var(--td-gcs-text) !important;
    }

    .gsc-results .gsc-webResult.gsc-result,
    .gsc-webResult.gsc-result {
      border: 1px solid transparent !important;
      background-color: var(--td-gcs-bg) !important;
    }

    .gsc-webResult.gsc-result.gsc-promotion {
      background-color: var(--td-gcs-bg) !important;
      border-color: transparent !important;
    }

    .gs-title,
    .gs-title * {
      color: var(--td-gcs-primary) !important;
    }

    .gs-snippet {
      color: var(--td-gcs-secondary) !important;
    }

    /* No results and error messages */
    .gs-no-results-result .gs-snippet,
    .gs-error-result .gs-snippet {
      background-color: var(--bs-warning-bg-subtle) !important;
      border: 1px solid var(--bs-warning-border-subtle) !important;
    }

    .gs-visibleUrl,
    .gs-visibleUrl-short {
      color: var(--td-gcs-success) !important;
    }

    .gsc-result-info {
      color: var(--td-gcs-secondary) !important;
    }

    /* ------------------------------------------------------------
    * ORDER BY ("Sort by:")
    * ------------------------------------------------------------ */
    .gsc-orderby {
      background: transparent !important;
    }

    .gsc-orderby-label {
      color: var(--td-gcs-secondary) !important;
    }

    /* the pill container */
    .gsc-selected-option-container {
      background-color: var(--td-gcs-bg) !important;
      border: 1px solid var(--td-gcs-border) !important;
      border-radius: var(--td-gcs-radius);
      color: var(--td-gcs-text) !important;
      position: relative;
      padding-right: 1.7rem;
      /* make room for arrow */
    }

    .gsc-selected-option {
      color: inherit !important;
    }

    /* replace Google's light arrow with our own */
    .gsc-control-cse .gsc-option-selector {
      background: none !important;
      width: 0 !important;
      height: 0 !important;
      padding: 0 !important;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--td-gcs-secondary);
      position: absolute !important;
      top: 50% !important;
      right: 0.55rem !important;
      transform: translateY(-50%);
    }

    /* the dropdown menu itself */
    .gsc-control-cse .gsc-option-menu {
      background: var(--td-gcs-bg) !important;
      border: 1px solid var(--td-gcs-border) !important;
      color: var(--td-gcs-text) !important;
    }

    .gsc-option-menu-item {
      color: var(--td-gcs-text) !important;
      background: transparent !important;
    }

    .gsc-option-menu-item-highlighted {
      background: rgba(255, 255, 255, 0.08) !important;
      color: var(--td-gcs-text) !important;
    }

    /* ------------------------------------------------------------
    * PAGINATION
    * ------------------------------------------------------------ */
    .gsc-results .gsc-cursor-box {
      margin: 10px 0;
    }

    .gsc-results .gsc-cursor-box .gsc-cursor-page {
      text-decoration: none;
      color: var(--td-gcs-text) !important;
      background: transparent;
    }

    .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
      border: var(--td-gcs-primary) solid 1px !important;
      color: var(--bs-body-color) !important;
      border-radius: 999px;
      padding: 0.25rem 0.6rem;
    }

    /* ------------------------------------------------------------
    * AUTOCOMPLETE
    * ------------------------------------------------------------ */
    .gsc-completion-container {
      background: var(--td-gcs-bg) !important;
      border: 1px solid var(--td-gcs-border) !important;
      color: var(--td-gcs-text) !important;
    }

    .gsc-completion-selected {
      background: rgba(255, 255, 255, 0.08) !important;
    }

    /* ------------------------------------------------------------
    * SPELLING / "DID YOU MEAN"
    * ------------------------------------------------------------ */
    .gs-spelling a {
      color: var(--td-gcs-primary) !important;
    }

    /* ------------------------------------------------------------
    * TABLE LINES
    * ------------------------------------------------------------ */
    .gsc-table-result,
    .gsc-table-cell-snippet-close {
      border: 0 !important;
    }

    /* ------------------------------------------------------------
    * "Find more on Google" footer
    * ------------------------------------------------------------ */
    .gcsc-find-more-on-google {
      color: var(--td-gcs-secondary) !important;
    }

    .gcsc-find-more-on-google a,
    .gcsc-find-more-on-google-text,
    .gcsc-find-more-on-google-query {
      color: var(--td-gcs-primary) !important;
      text-decoration: none !important;
    }

    .gcsc-find-more-on-google-magnifier path {
      fill: var(--td-gcs-primary) !important;
    }

    .gcsc-find-more-on-google:hover .gcsc-find-more-on-google-magnifier path {
      fill: var(--td-gcs-link-hover, var(--td-gcs-primary)) !important;
    }
  }
}
