/******************************
 *** Global Variables ***
 ******************************/

:root {
  --duration-short: .1s;
  --inputs-border-width: 1px;
}

/******************************
 *** Search Modal ***
 ******************************/

.gbi__header__search .search-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 10000;
  display: block !important;
}

/******************************
 *** Perma-Search Styles ***
 ******************************/

.gbi-perma-search {
  width: 100%;
}

.gbi-perma-search>form {
  width: 50rem;
  max-width: 100%;
  margin: auto;
  padding: 1rem;
}

.gbi-perma-search>form>svg {
  display: none !important;
}

.gbi-perma-search .field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.gbi-perma-search .field::before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
}

.gbi-perma-search .field::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.gbi-perma-search .search__input.field__input {
  padding-right: 9.8rem;
  flex-grow: 1;
}

.gbi-perma-search .search__input.field__input:focus {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.gbi-perma-search .search__input.field__input:not(:placeholder-shown) {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.gbi-perma-search .field__label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: var(--inputs-border-width);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  letter-spacing: .1rem;
  line-height: 1.5;
}

.gbi-perma-search .search__input.field__input:focus~.field__label,
.gbi-perma-search .search__input.field__input:not(:placeholder-shown)~.field__label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: .04rem;
}

.gbi-perma-search button .search__button .icon {
  height: 1.8rem;
  width: 1.8rem;
}

.gbi-perma-search .search__input.field__input:not(:focus)::-webkit-input-placeholder {
  /* WebKit browsers */
  color: transparent;
}

.gbi-perma-search .search__input.field__input:not(:focus):-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: transparent;
}

.gbi-perma-search .search__input.field__input:not(:focus)::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: transparent;
}

.gbi-perma-search .search__input.field__input:not(:focus):-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: transparent;
}

.gbi-search-header * {
  box-sizing: border-box;
}

.gbi-hide {
  display: none !important;
}

/******************************
 *** SAYT (Search-As-You-Type) ***
 ******************************/

.gbi-sayt-holder {
  position: relative;
  overflow: visible;
}

.gbi-sayt {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 30rem;
  z-index: 10000;
  display: none;
  justify-content: space-between;
  align-items: flex-start;
  background-color: white;
  box-shadow: 3px 3px 8px black;
}

.gbi-sayt.active {
  display: flex;
}

.gbi-sayt * {
  box-sizing: border-box;
  color: black;
}

.gbi-sayt>div {
  flex-grow: 1;
  padding: .5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.gbi-sayt>div.gbi-sayt-text {
  width: 20rem;
  height: 100%;
  border-right: 1px solid #ccc;
}

.gbi-sayt>div.gbi-sayt-text>h2 {
  font-size: 2rem;
  padding: 0.25rem;
  margin: 1.5rem 0 0.5rem;
  background-color: #eee;
}

.gbi-sayt>div.gbi-sayt-text a:link {
  text-decoration: none;
  color: black;
}

.gbi-sayt>div.gbi-sayt-text a:visited {
  text-decoration: none;
  color: black;
}

.gbi-sayt>div.gbi-sayt-text a:hover {
  text-decoration: underline;
  color: black;
}

.gbi-sayt>div.gbi-sayt-text a:focus {
  text-decoration: none;
  color: black;
}

.gbi-sayt>div.gbi-sayt-text a:active {
  text-decoration: none;
  color: black;
}

.gbi-sayt>ul.gbi-sayt-products {
  width: calc(100% - 20rem);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  list-style: none;
  margin: 1rem auto;
}

.gbi-sayt>ul.gbi-sayt-products>li {
  width: calc(33.333333% - 2rem) !important;
  margin: 0 1rem;
  flex-grow: 0;
}

.gbi-sayt .badge {
  background-color: white;
}


/******************************
 *** Miscellaneous ***
 ******************************/

/* TODO: investigate what this actually does and if it is safe to remove */
.gbi-hide+.gbi-search-plp {
  width: 100%;
}

/* Ensure we never actually need to do this */
.invisible {
  display: none !important;
}