.panelSearchField {
  /* so that the introduction is on top of other panels, _but_ still keep it
   * below the input field (see below) */
  z-index: 1;
  padding: 0 4px;
}

.panelSearchFieldLabel {
  /* We fix the height so that the panelSearchFieldIntroduction doesn't increase it */
  display: inline-flex;
  height: 100%;
  align-items: center;
  gap: 4px;
}

.panelSearchFieldInput {
  width: 300px;
}

.panelSearchFieldIntroduction {
  z-index: -1; /* it needs to be below the input field */
  padding: 0 4px;
  background-color: white;
  box-shadow: 0 1px 4px rgb(12 12 13 / 0.1); /* This is grey-90 with 10% opacity, according to the photon design document */
  color: var(--grey-50);
  font-size: 0.9em;
  line-height: 2;
  transform: translate(2px, -2px);
}

.panelSearchFieldIntroduction.isDisplayed {
  transition:
    transform 150ms var(--animation-curve),
    opacity 150ms ease-in-out,
    visibility 150ms ease-in-out;
}

.panelSearchFieldIntroduction.isHidden {
  opacity: 0;
  transform: translateY(-100%);

  /* steps(1) is to wait until the end for the transform to happen */
  transition:
    transform 150ms steps(1),
    opacity 150ms ease-in-out,
    visibility 150ms ease-in-out;
  visibility: hidden;
}
