// Custom styling to the Google Custom Search used in `_includes/header-global.html` & `_includes/nav-global.html`
// ==================================================
// Styling for the Google Custom Search used in the `_includes/header-global.html` version of the nav
// ==================================================
.header-global__search-collapse #___gcse_0:hover #gsc-iw-id1,
.header-global__search-collapse #___gcse_0:focus #gsc-iw-id1 {
  filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
}

.header-global__search-collapse #gsc-iw-id1 {
  border-radius: 2rem;
  padding-left: .5rem;
  border: solid thin $grey-5;
  line-height: 1;
  padding-top: 3px;
  padding-bottom: 3px;
}

.header-global__search-collapse .gsc-search-button-v2 {
  background-color: transparent !important;
  border: none !important;
  pointer-events: auto;
  position: relative;
  right: -0.5rem;
  top: -.25rem;
  transition-property: right;
  transition-duration: .2s;
}

.header-global__search-collapse button.gsc-overrides__clear-x {
  right: .5rem;
  padding-right: 5px !important;
}

@media screen and (min-width: 992px) {
  .header-global__search-collapse .gsc-search-button-v2 {
    top: 0;
    right: .5rem;
  }

  .header-global__search-collapse button.gsc-overrides__clear-x {
    right: 1.125rem;
    padding-right: 5px !important;
  }
}

.header-global__search-collapse .gsst_a .gscb_a {
  vertical-align: middle;
}

.header-global__search-collapse .gsc-search-button-v2 svg {
  fill: $primary-blue !important;
  height: 1.25rem;
  width: 1.25rem;
  transition-property: fill;
  transition-duration: .2s;
}

.header-global__search-collapse .gsc-search-button-v2:hover svg,
.header-global__search-collapse .gsc-search-button-v2:focus svg {
  fill: $primary-red !important;
}

.header-global__search-collapse td.gsc-search-button {
  display: inline;
  pointer-events: none;
  position: absolute;
  right: 50px;
}

@media screen and (min-width: 1400px) {
  .header-global__search-collapse td.gsc-search-button {
    right: 44px;
  }
}

.header-global__search-collapse .gsc-search-box-tools .gsc-search-box .gsc-input {
  padding-right: 0 !important;
}

// Similar styling for the Google Custom Search used in the `_includes/nav-global.html` version of the nav
// ==================================================
.nav-global__gcse-wrapper #___gcse_0:hover #gsc-iw-id1,
.nav-global__gcse-wrapper #___gcse_0:focus #gsc-iw-id1 {
  filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
}

.nav-global__gcse-wrapper #gsc-iw-id1 {
  border-radius: 2rem;
  padding-left: .5rem;
  border: solid thin $grey-5;
  line-height: 1;
  padding-top: 3px;
  padding-bottom: 3px;
}

.nav-global__gcse-wrapper .gsc-search-button-v2 {
  background-color: transparent !important;
  border: none !important;
  pointer-events: auto;
  position: relative;
  right: 30px;
  transition-property: right;
  transition-duration: .2s;
}

.nav-global__gcse-wrapper .gsst_a .gscb_a {
  vertical-align: middle;
}

.nav-global__gcse-wrapper button.gsc-overrides__clear-x {
  right: 48px;
  padding-right: 5px !important;
}

.nav-global__gcse-wrapper .gsc-search-button-v2 svg {
  fill: $primary-blue !important;
  height: 1.25rem;
  width: 1.25rem;
  transition-property: fill;
  transition-duration: .2s;
}

.nav-global__gcse-wrapper .gsc-search-button-v2:hover svg,
.nav-global__gcse-wrapper .gsc-search-button-v2:focus svg {
  fill: $primary-red !important;
}

.nav-global__gcse-wrapper td.gsc-search-button {
  display: inline;
  pointer-events: none;
  position: absolute;
  right: 50px;
}

@media screen and (min-width: 1400px) {
  .nav-global__gcse-wrapper td.gsc-search-button {
    right: 44px;
  }
}

.nav-global__search-collapse--visible #___gcse_0 {
  margin-bottom: 20px;
}