.Search {
  position: relative;
  display: flex;
  align-items: center;
}

// The control opens the search modal, so it is a button and carries the same
// icon-and-label markup as the notification and message controls beside it.
// That is what lets it collapse to its icon in the header and keep its label
// in the drawer without any rule of its own — see `Button--icon` below.
.Search-input .Button-labelText {
  overflow: hidden;
  text-overflow: ellipsis;
}

.Search-clear {
  color: var(--muted-color);
}

// In the header the globe stands in for the locale name when there is no room
// for it, so where the name is showing the icon beside it is just noise — none
// of the other labelled controls up there carry one. The drawer is the other
// way round: every entry in that column is an icon and a label together, so
// the locale keeps both and matches its neighbours.
@media @tablet-up {
  .LocaleDropdown .Dropdown-toggle .Button-icon {
    display: none;
  }
}

// In the header the label goes and the magnifying glass stands in for it, the
// same as every other control up there. The drawer keeps its labels, so the
// full "Search Forum" stays legible where there is a column to read it in.
@media @tablet-up {
  .Header-secondary .Search {
    .Search-input {
      .Button--icon();
    }

    // Clearing is only reachable while the label is showing the query, so the
    // affordance goes with it rather than sitting beside a bare icon.
    .Search-clear {
      display: none;
    }
  }

  // An active search is different: the results being shown are filtered, and
  // the header is the only place that says so once the modal has been closed.
  // Hiding the query here would leave someone looking at a filtered page with
  // nothing to explain it and no way back, so the control takes the room it
  // needs to show what was searched for and to undo it.
  .Header-secondary .Search--active {
    .Search-input {
      width: auto;
      max-width: 180px;
      padding: 8px 13px;
      color: var(--header-color);

      .Button-label {
        display: flex;
      }
    }

    .Search-clear {
      display: flex;
      color: var(--header-color);
    }
  }
}

// The drawer stretches every control to the full width of its row, the clear
// button included. With a search active the search button has to make room for
// it, so it may shrink below its label, and the clear button keeps the size it
// has in the header.
@media @phone {
  .Header-controls .Search {
    .Search-input {
      min-width: 0;
    }

    .Search-clear {
      width: 36px;
      flex-shrink: 0;
      justify-content: center;
    }
  }
}

// The accent marks the control as doing something to the page, matching how the
// notification bell colours its icon when there is something to attend to.
.Search--active .Search-input .Button-icon {
  color: var(--header-color);
}

.DiscussionSearchResult {
  > .DiscussionListItem {
    --discussion-list-item-bg-hover: var(--control-bg);
    margin: 0 -16px;
    border-radius: 0;

    > .DiscussionListItem-content {
      opacity: 1;
    }
  }

  &.active > .DiscussionListItem {
    background-color: var(--discussion-list-item-bg-hover);
  }
}

.UserSearchResult {
  margin: 0 -16px;

  .badges {
    margin-inline-start: 4px;
  }
  > a {
    gap: 6px;
    padding: 12px 15px;
    border-radius: 0;
  }
  .Avatar {
    --size: 36px;
  }
  .username {
    font-size: 15px;
  }
  &-name {
    flex-grow: 1;
  }
}

.SearchModal {
  &-body {
    display: flex;
    flex-direction: column;
    row-gap: 6px;
  }

  &-tabs-content {
    .Dropdown--expanded();

    .Dropdown-header {
      color: var(--muted-more-color);
    }

    > .SearchModal-section:first-of-type .Modal-divider {
      margin-top: -1px;
    }
  }

  &-input {
    background: transparent !important;
    height: 42px;
    border-color: var(--form-control-color);
  }

  &-results {
    mark {
      background: none;
      padding: 0;
      font-weight: bold;
      color: inherit;
      box-shadow: none;
    }

    .Badge {
      --packing-space: 8px;
      --size: 18px;
      box-shadow: none;
    }
  }

  &-fullPage .LinkButton {
    font-weight: bold;
  }

  .Dropdown-menu>li>a, .Dropdown-menu>li>button, .Dropdown-menu>li>span {
    border-radius: var(--border-radius);
  }

  .Input {
    z-index: 0;
  }
}

.SearchModal-visual-wrapper {
  position: absolute;
  inset: 0;
  margin-left: 34px;
  margin-right: 32px;
  line-height: 42px;
  color: transparent;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.SearchModal-visual-input {
  position: absolute;
  inset: 0;
  white-space: pre;
}

.SearchModal-visual-input mark {
  margin: 0;
  padding: 0;
  background-color: var(--control-bg-light);
  color: transparent;
}