/*
 Override Google custom search classes
 */

.paragraph.paragraph--type--google-search {
  margin: 20px 0;
  background: none;

  .cse .gsc-control-cse,
  .gsc-control-cse {
    padding: 1em 0;
    width: auto;
  }

  .gsc-control-cse,
  .gsc-control-cse .gsc-table-result {
    font-family: $font-family-base;
    font-size: 16px;
    width: 100%;
  }

  .cse .gsc-search-button-v2, .gsc-search-button-v2 {
    border: none;
    padding: 6px 40px;
  }

  .gsc-search-box-tools .gsc-search-box {
    .gsc-input {
      height: 50px;
      padding-right: 0;
    }
    .gsc-search-button {
      background: var(--wsPrimaryColor, var(--y-color-blue-dark, $pink));
      border-radius: 0 10px 10px 0;
    }
  }

  .gsc-results .gsc-cursor-box {
    text-align: center;
    margin: 10px;

    .gsc-cursor-page {
      @include cachet(800);
      border-radius: 8px;
      background-color: $gray-100;
      border: solid 1px $gray-100;
      color: var(--wsPrimaryColor, var(--y-color-blue-dark, $pink));
      width: 50px;
      height: 50px;
      padding: 0;
      line-height: 50px;
      font-size: 20px;
      display: inline-block;
      text-decoration: none;

      &:hover, &:active {
        text-decoration: none;
      }
    }
    .gsc-cursor-current-page {
      text-decoration: none;
      color: $gray-800;
      font-weight: bold;
    }
  }

  .gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title,
  .gsc-control-cse .gs-result .gs-title * {
    text-decoration: none;
    font-size: 25px;
    color: var(--wsPrimaryColor, $primary);
  }

  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b,
  .gs-imageResult a.gs-title:link,
  .gs-imageResult a.gs-title:link b {
    color: var(--wsPrimaryColor, $primary);
  }

  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b,
  .gs-imageResult a.gs-title:visited,
  .gs-imageResult a.gs-title:visited b {
    color: var(--wsPrimaryColor, $primary);
  }

  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b,
  .gs-imageResult a.gs-title:hover,
  .gs-imageResult a.gs-title:hover b {
    text-decoration: underline;
    color: $gray-600;
  }

  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b,
  .gs-imageResult a.gs-title:active,
  .gs-imageResult a.gs-title:active b {
    text-decoration: underline;
    color: $gray-600;
  }

  .gs-spelling a {
    color: var(--wsPrimaryColor, $primary);
  }

  .gcsc-find-more-on-google {
    color: var(--wsPrimaryColor, $primary);
  }
  .gcsc-find-more-on-google-magnifier {
    fill: var(--wsPrimaryColor, $primary);
  }

  .gs-web-image-box, .gs-promotion-image-box {
    margin-right: 10px;
  }

  .gsc-result-info {
    font-size: 16px;
  }
  .gsc-selected-option {
    font-size: 16px;
  }

  .gsc-tabHeader {
    font-size: 16px;
  }

}
