.search-bar-container {
  display: flex;
  align-items: center;
  border-radius: 8px;
  width: 300px;
  transition: all 0.25s ease;
}

.search-bar-container:hover,
.search-bar-container:focus-within {
  width: 80%;
  flex-grow: 1;
  background-color: var(--input-focus-background);
}

.search-bar-container:hover .search-input {
  background-color: var(--input-focus-background);
}

.search-input {
  background-color: var(--input-background);
  border: 1px solid var(--input-border);
  color: var(--body-color);
  font-size: 1.2em;
  border-radius: 8px;
  width: 100%;
  transition: all 0.25s ease;
  height: 32px;
  box-sizing: border-box;
  padding-left: 8px;
  font-style: italic;
}

.search-input:focus {
  background-color: var(--input-focus-background);
  border-color: var(--input-focus-border);
  outline: none;
}