/* OE Filter Search (oe/filter-search). The dark style matches the old hero
   search: see-through white field with a light border on navy. */

.oe-block-filter-search {
  --oe-fs-bg: var(--oe-color-primary-4, #fff);
  --oe-fs-border: var(--oe-color-trans-dark-10);
  --oe-fs-text: var(--oe-color-secondary);
  --oe-fs-icon: var(--oe-color-cool-grey);
  position: relative;
  width: 100%;
}

.oe-block-filter-search--dark {
  --oe-fs-bg: var(--oe-color-trans-light-10);
  --oe-fs-border: color-mix(in srgb, var(--oe-color-primary-4, #fff) 40%, transparent);
  --oe-fs-text: var(--oe-color-primary-4, #fff);
  --oe-fs-icon: color-mix(in srgb, var(--oe-color-primary-4, #fff) 75%, transparent);
}

/* Focused, the dark field turns white (the theme's input:focus does that
   anyway), so the text, icon and clear button switch to the light-style
   colours to stay visible. */
.oe-block-filter-search--dark .oe-block-filter-search__field:focus-within {
  --oe-fs-bg: var(--oe-color-primary-4, #fff);
  --oe-fs-text: var(--oe-color-secondary);
  --oe-fs-icon: var(--oe-color-cool-grey);
}

.oe-block-filter-search__form {
  display: flex;
  flex-direction: column;
  gap: var(--oe-spacing-xsmall);
  margin: 0;
}

.oe-block-filter-search .oe-block-filter-search__label {
  margin: 0;
}

.oe-block-filter-search__field {
  position: relative;
}

.oe-block-filter-search__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--oe-spacing-small);
  color: var(--oe-fs-icon);
  transform: translateY(-50%);
  pointer-events: none;
}

.oe-block-filter-search .oe-block-filter-search__input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-xlarge) var(--oe-spacing-xsmall) calc(var(--oe-spacing-small) * 2 + 18px);
  border: 1px solid var(--oe-fs-border);
  border-radius: var(--oe-border-radius-small);
  background-color: var(--oe-fs-bg);
  color: var(--oe-fs-text);
  font: inherit;
  font-size: var(--oe-font-size-base);
}

.oe-block-filter-search .oe-block-filter-search__input::placeholder {
  color: var(--oe-fs-icon);
  opacity: 1;
}

.oe-block-filter-search .oe-block-filter-search__input:focus {
  border-color: var(--oe-color-primary);
  background-color: var(--oe-fs-bg);
  color: var(--oe-fs-text);
  outline: 2px solid var(--oe-color-primary);
  outline-offset: 0;
}

.oe-block-filter-search__clear {
  position: absolute;
  top: 50%;
  right: var(--oe-spacing-2xsmall);
  display: grid;
  place-content: center;
  width: var(--oe-sizing-large);
  height: var(--oe-sizing-large);
  padding: 0;
  border: 0;
  border-radius: var(--oe-border-radius-small);
  background: transparent;
  color: var(--oe-fs-icon);
  transform: translateY(-50%);
  cursor: pointer;
}

.oe-block-filter-search__clear[hidden] {
  display: none;
}

.oe-block-filter-search__clear:hover,
.oe-block-filter-search__clear:focus {
  background: transparent;
  color: var(--oe-fs-text);
}

/* Suggestions: always a white panel, whatever the style. */
.oe-block-filter-search .oe-block-filter-search__list {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--oe-spacing-2xsmall));
  right: 0;
  left: 0;
  max-height: min(60vh, 22rem);
  margin: 0;
  padding: var(--oe-spacing-2xsmall) 0;
  overflow-y: auto;
  border: 1px solid var(--oe-color-trans-dark-10);
  border-radius: var(--oe-border-radius-small);
  background-color: var(--oe-color-primary-4, #fff);
  list-style: none;
}

.oe-block-filter-search__list[hidden] {
  display: none;
}

.oe-block-filter-search .oe-block-filter-search__list li {
  margin: 0;
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  color: var(--oe-color-secondary);
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-medium-large);
  text-align: left;
}

.oe-block-filter-search__option {
  cursor: pointer;
}

.oe-block-filter-search__option:hover,
.oe-block-filter-search__option[aria-selected="true"] {
  background-color: var(--oe-color-secondary-muted);
}

.oe-block-filter-search__option mark {
  background: none;
  color: inherit;
}

.oe-block-filter-search .oe-block-filter-search__none {
  color: var(--oe-color-cool-grey);
  font-style: italic;
}