$localSearchHeight: 30px;

.kuiLocalSearch {
  display: flex;
  width: 100%;
  height: $localSearchHeight;
}

.kuiLocalSearchInput {
  flex: 1 1 100%;
  padding: 5px 15px;
  font-size: $localNavFontSizeNormal;
  color: $localNavTextColor;
  background-color: $localSearchBackgroundColor;
  border: 2px solid $localSearchBackgroundColor;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;

  &.kuiLocalSearchInput-isInvalid {
    border-color: $localSearchBorderColor-isInvalid;
  }

  @include darkTheme {
    color: $localNavTextColor--darkTheme;
    background-color: $localSearchBackgroundColor--darkTheme;
    border-color: $localSearchBackgroundColor--darkTheme;

    &.kuiLocalSearchInput-isInvalid {
      border-color: $localSearchBorderColor-isInvalid--darkTheme;
    }
  }
}

.kuiLocalSearchButton {
  width: 43px;
  height: $localSearchHeight;
  font-size: $localNavFontSizeNormal;
  color: $buttonTextColor;
  background-color: $buttonBackgroundColor;
  border: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;

  @include darkTheme {
    color: $buttonTextColor--darkTheme;
    background-color: $buttonBackgroundColor--darkTheme;
  }
}