.container {
  display: inline-flex;
  gap: var(--spacing-1);
  align-items: center;
  width: 240px;
  height: 30px;
  padding: var(--spacing-0) var(--spacing-2);
  color: var(--overlay-30);
  background-color: var(--global-background);
  border: 1px solid var(--pane-border);
  border-radius: var(--border-radius-base);
  transition:
    color var(--default-hover-animation-duration) var(--default-timing-function),
    border-color var(--default-hover-animation-duration)
    var(--default-timing-function);
}

.container:hover {
  color: var(--overlay-50);
  border-color: var(--pane-border-hover);
  transition:
    color var(--default-hover-animation-duration) var(--default-timing-function),
    border-color var(--default-hover-animation-duration)
    var(--default-timing-function);
}

.container:focus-visible {
  outline: 1px solid var(--button-primary-background);
}

.searchIcon {
  width: 12px;
  height: 12px;
  color: var(--overlay-50);
}

.text {
  flex-grow: 1;
  font-size: var(--font-size-3);
}

.keyIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  font-size: var(--font-size-2);
  color: var(--global-mute-text);
  background-color: var(--overlay-5);
}