@use "../util" as *;
@use "../globals" as *;

/*form group-alt*/
.form-group-search {
  --height: 2.5rem;

  //border: 1px solid var(--bg-core-primary);
  padding: 0.15rem;
  height: max-content;
  //min-width: max-content;
  color: var(--text-core);
  border-radius: $border-radius-pill;
  background-color: var(--bg-core-primary-light);
  display: inline-block;
  position: relative;
  isolation: isolate;
  transition: $transition;
}




/*INPUT RESET*/
input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
}


/* Remove Arrows/Spinners Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Remove Arrows/Spinners Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}


/* clears the 'X' in search*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/*focus within*/
.form-group-search:focus-within {
  background-color: var(--bg-core-primary-lighten);
  background-color: #fff;
}

input[type="search"] {
  //appearance: none;

  &:focus-within ~ #search.search-drop-down {
    opacity: 1;
    pointer-events: initial;
  }

  &:focus-within ~ .backdrop {
    opacity: 1;
    display: block;
  }
}

.input-cta-icon {
  &:focus-within ~ #select.search-drop-down {
    opacity: 1;
    pointer-events: initial;
  }

  &:focus-within ~ .backdrop {
    opacity: 1;
    display: block;
  }
}

/*SEARCH CONTENT*/
.form-group-search .input-group-content {
  height: var(--height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-group-search .input-leading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $border-radius-pill;
  color: var(--text-core-lc);
  height: var(--height);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  z-index: 1;
}

.form-group-search .input-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: $border-radius-pill;
  background-color: transparent;
  cursor: pointer;
  height: var(--height);
  aspect-ratio: 1 / 1;
  z-index: 1;
  transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
  &:focus-visible,
  &.focus {
    outline: 0;
    box-shadow: 0 0 0.5rem var(--bg-core-primary-lighten);
  }
}

.input-cta-icon-more {
  position: absolute;
  opacity: 1;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
}

.form-group-search .input-cta-icon:hover .input-cta-icon-more{
  opacity: 0;
} 

.form-group-search .input-area {
  flex: 1;
}

.form-group-search input {
  &:focus-visible,
  &.focus {
    outline: 0;
  }
}

.form-group-search .input-cta-icon:hover {
  background-color: var(--bg-core-primary-lighten);
}

/*DROPDOWN*/
.search-drop-down {
  position: absolute;
  top: 25px;
  left: 0;
  padding-top: 1.5rem;
  min-width: 100%;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - 85px);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  z-index: -1;
  list-style: none;
  background-color: #fff;
  box-shadow: $base-box-shadow;
  border-radius: 0 0 1.5rem 1.5rem;
  transition: all 0.3s ease-in-out;
}

.dropdown-menu {
  height: auto;
  overflow: auto;
  margin-bottom: 1rem;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: $font-size-sm;
  color: var(--text-core-lc);
  white-space: nowrap;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 1.5rem;
  clear: both;
  color: inherit;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--text-core-hc);
  text-decoration: none;
  background-color: var(--bg-core-primary-light);
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--bg-core-primary-light);
}
