button {
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}


:host {
  /**
   * @prop --scene-tree-search-search-icon-offset: A CSS length that specifies
   * the horizontal offset of the search icon
   */
  --scene-tree-search-search-icon-offset: 8px;

  /**
   * @prop --scene-tree-search-clear-button-offset: A CSS length that specifies
   * the horizontal offset of the clear button.
   */
  --scene-tree-search-clear-button-offset: 8px;

  /**
   * @prop --scene-tree-search-input-padding: A CSS padding value that specifies
   * horizontal and vertical lengths of the internal text input.
   */
  --scene-tree-search-input-padding: 0.5rem 32px;

  /**
   * @prop --scene-tree-search-input-border: A CSS border value that specifies
   * the border of the internal text input.
   */
  --scene-tree-search-input-border: none;

  /**
   * @prop --scene-tree-search-input-border-radius: A CSS length that specifies
   * the radius of the internal text input.
   */
  --scene-tree-search-input-border-radius: 0.25rem;

  /**
   * @prop --scene-tree-search-input-background: A CSS background that specifies
   * the background color or image of the internal text input.
   */
  --scene-tree-search-input-background: none;

  /**
   * @prop --scene-tree-search-focused-input-background: A CSS background value
   * that specifies the background of the internal text input when focused.
   */
  --scene-tree-search-focused-input-background: var(--neutral-200);

  /**
   * @prop --scene-tree-search-focused-input-outline: A CSS outline value that
   * specifies the outline of the internal text input when focused.
   */
  --scene-tree-search-focused-input-outline: none;

  display: block;
  width: 100%;
  font-size: 0.875rem;
}

.root {
  width: 100%;
  position: relative;
}

.input {
  background: var(--scene-tree-search-input-background);
  border: var(--scene-tree-search-input-border);
  border-radius: var(--scene-tree-search-input-border-radius);
  box-sizing: border-box;
  font-size: inherit;
  padding: var(--scene-tree-search-input-padding);
  outline: none;
  width: 100%;
}

.input.background {
  background: var(--scene-tree-search-focused-input-background);
  outline: var(--scene-tree-search-focused-input-outline);
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.overlay-clear {
  display: none;
  right: var(--scene-tree-search-clear-button-offset);
}

.overlay-clear.show {
  display: flex;
}

.icon {
  color: var(--neutral-700);
}

.icon-search {
  position: absolute;
  left: var(--scene-tree-search-search-icon-offset);
  pointer-events: none;
}

.clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: initial;
  cursor: pointer;
}
.clear-btn:hover {
  color: var(--neutral-800);
}
.clear-btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}