/* Styles for the search bar. Every rule hangs from the 'search-bar' host element to scope it to the component. */

search-bar .search-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--md-spacing-3xs);
}

search-bar .search-bar__group {
  display: flex;
  flex: 8;
}

/* Native buttons with MDDS classes: .md-btn lacks the no-wrap that Bootstrap's .btn gave them, so in the flex row
   they shrank and wrapped their label */
search-bar .search-bar__main-toggle,
search-bar .search-bar__option-toggle,
search-bar .search-bar__submit {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Joined controls: only the outer ends keep their radius */
search-bar .search-bar__main-toggle {
  border-radius: var(--md-radius-xs) 0 0 var(--md-radius-xs);
}

search-bar .search-bar__option-toggle {
  background-color: var(--md-background-secondary-selected);
  border-radius: var(--md-radius-none);
}

search-bar .search-bar__text-input {
  height: 100%;
  border-radius: var(--md-radius-none);
}

search-bar .search-bar__submit {
  border-radius: 0 var(--md-radius-xs) var(--md-radius-xs) 0;
}

search-bar .search-bar__chevron {
  vertical-align: middle;
}

search-bar .search-bar__option-clear {
  color: var(--md-content-tertiary);
}

search-bar .search-bar__option-label {
  display: block;
  max-width: 15vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Dropdown menus */
search-bar .search-bar__menu {
  max-height: 220px; /* no token: the max-width ramp starts far above a dropdown's height */
  overflow-y: auto;
}

search-bar .search-bar__menu-item {
  color: var(--md-content-secondary);
}

search-bar .search-bar__menu-item--main {
  color: var(--md-content-tertiary);
}

search-bar .search-bar__menu-option {
  display: flex;
  align-items: flex-start;
  gap: var(--md-spacing-3xs);
}

/* Nested under the menu to outweigh Bootstrap's '.dropdown-menu .divider' margin */
search-bar .search-bar__menu .search-bar__menu-divider {
  margin: var(--md-spacing-4xs);
}

/* Inputs area */
search-bar .search-bar__input {
  display: flex;
  width: 100%;
}

search-bar .search-bar__date-input {
  width: 100%;
}

/* Selector input: active filters as chips */
search-bar .search-bar__chips-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--md-spacing-3xs);
  width: 100%;
  padding: 0 var(--md-spacing-xs);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
  border-radius: var(--md-radius-none);
  background-color: var(--md-background-primary);
}

/* The clear-all tooltip is rendered next to its button, at the field's right edge: as an absolute box its
   shrink-to-fit width is what is left up to that edge, so it wrapped word by word. max-content keeps it on one
   line (Bootstrap's .tooltip-inner max-width still caps long labels). */
search-bar .search-bar__chips-field .tooltip.md-tooltip {
  width: max-content;
}

search-bar .search-bar__chips-dropdown {
  flex: 1;
  min-width: 0;
}

search-bar .search-bar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-spacing-3xs);
  overflow: hidden;
  height: 32px; /* one chip row: the chip-overflow directive hides whatever wraps below it */
}

/* visibility, opacity and display stay inline on the chips: chip-overflow toggles them by resetting
   the inline value, which would fall back to a hidden state if it came from here */
search-bar .search-bar__chip {
  transition: opacity 120ms ease;
  cursor: default;
}

search-bar .search-bar__chips-panel {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  z-index: 1051; /* above the Bootstrap modal (1050) the bar is rendered in */
  cursor: default;
}

search-bar .search-bar__chips-panel-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-spacing-2xs);
  padding: var(--md-spacing-2xs);
  max-height: 220px;
  overflow: auto;
}