.search {
  align-items: center;
  background-color: var(--color-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  max-width: 11.25rem;
  padding: var(--spacing-sm) var(--spacing-lg);
  transition: gap var(--duration-sm);
  transition: max-width var(--duration-md);
}

.search:focus-within {
  box-shadow: var(--shadow-md);
  max-width: 24rem;
}

.search-input {
  flex: 1;
  line-height: var(--line-height-lg);
  width: 100%;
}

.search-label {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  transform: translateX(calc(var(--spacing-xs) * -1));
}

.search-label .icon {
  color: var(--color-dark);
  font-size: var(--font-size-lg);
}