<commit_before>@import "./searchbar";
@import "./searchbar.md.vars";

// Material Design Searchbar
// --------------------------------------------------

:host {
  --clear-button-color: initial;
  --cancel-button-color: #{$searchbar-md-cancel-button-color};
  --color: #{$searchbar-md-input-text-color};
  --icon-color: #{$searchbar-md-input-search-icon-color};
  --background: #{$searchbar-md-input-background-color};

  @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);

  background: $searchbar-md-background;
}


// Searchbar Search Icon
// -----------------------------------------

.searchbar-search-icon {
  @include position(11px, null, null, 16px);

  width: $searchbar-md-input-search-icon-size + 1;
  height: $searchbar-md-input-search-icon-size + 1;
}


// Searchbar Cancel Icon
// -----------------------------------------

.searchbar-cancel-button {
  @include position(0, null, null, 5px);

  background-color: $searchbar-md-cancel-button-background-color;

  font-size: $searchbar-md-cancel-button-font-size;
}

// Searchbar Search & Cancel Icon
// -----------------------------------------

.searchbar-search-icon,
.searchbar-cancel-button {
  position: absolute;
}

.searchbar-search-icon.activated,
.searchbar-cancel-button.activated {
  background-color: transparent;
}


// Searchbar Input Field
// -----------------------------------------

.searchbar-input {
  @include padding(6px, 55px);
  @include border-radius($searchbar-md-input-border-radius);
  @include background-position(start, 8px, center);

  height: $searchbar-md-input-height;

  font-size: 16px;
  font-weight: 400;

  line-height: $searchbar-md-input-line-height;

  box-shadow: $searchbar-md-input-box-shadow;
}


// Searchbar Clear Input Icon
// -----------------------------------------

.searchbar-clear-button {
  @include position(0, 13px, null, null);
  @include padding(0);

  position: absolute;

  height: 100%;

  border: 0;

  background-color: transparent;
}

.searchbar-clear-button.activated {
  background-color: transparent;
}

.searchbar-clear-icon {
  width: $searchbar-md-input-clear-icon-size;
  height: 100%;
}


// Searchbar Focused
// -----------------------------------------

:host(.searchbar-has-focus) .searchbar-search-icon {
  display: block;
}

:host(.searchbar-has-focus) .searchbar-cancel-button {
  display: block;
}


// Searchbar in Toolbar
// -----------------------------------------

:host-context(ion-toolbar) {
  @include padding(3px);
}<commit_msg>fix(searchbar): hide search icon when focused with cancel button (#17260)<commit_after>@import "./searchbar";
@import "./searchbar.md.vars";

// Material Design Searchbar
// --------------------------------------------------

:host {
  --clear-button-color: initial;
  --cancel-button-color: #{$searchbar-md-cancel-button-color};
  --color: #{$searchbar-md-input-text-color};
  --icon-color: #{$searchbar-md-input-search-icon-color};
  --background: #{$searchbar-md-input-background-color};

  @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);

  background: $searchbar-md-background;
}


// Searchbar Search Icon
// -----------------------------------------

.searchbar-search-icon {
  @include position(11px, null, null, 16px);

  width: $searchbar-md-input-search-icon-size + 1;
  height: $searchbar-md-input-search-icon-size + 1;
}


// Searchbar Cancel Icon
// -----------------------------------------

.searchbar-cancel-button {
  @include position(0, null, null, 5px);

  background-color: $searchbar-md-cancel-button-background-color;

  font-size: $searchbar-md-cancel-button-font-size;
}

// Searchbar Search & Cancel Icon
// -----------------------------------------

.searchbar-search-icon,
.searchbar-cancel-button {
  position: absolute;
}

.searchbar-search-icon.activated,
.searchbar-cancel-button.activated {
  background-color: transparent;
}


// Searchbar Input Field
// -----------------------------------------

.searchbar-input {
  @include padding(6px, 55px);
  @include border-radius($searchbar-md-input-border-radius);
  @include background-position(start, 8px, center);

  height: $searchbar-md-input-height;

  font-size: 16px;
  font-weight: 400;

  line-height: $searchbar-md-input-line-height;

  box-shadow: $searchbar-md-input-box-shadow;
}


// Searchbar Clear Input Icon
// -----------------------------------------

.searchbar-clear-button {
  @include position(0, 13px, null, null);
  @include padding(0);

  position: absolute;

  height: 100%;

  border: 0;

  background-color: transparent;
}

.searchbar-clear-button.activated {
  background-color: transparent;
}

.searchbar-clear-icon {
  width: $searchbar-md-input-clear-icon-size;
  height: 100%;
}


// Searchbar Focused
// -----------------------------------------

:host(.searchbar-has-focus) .searchbar-search-icon {
  display: block;
}

:host(.searchbar-has-focus) .searchbar-cancel-button {
  display: block;
}

:host(.searchbar-has-focus) .searchbar-cancel-button + .searchbar-search-icon {
  display: none;
}


// Searchbar in Toolbar
// -----------------------------------------

:host-context(ion-toolbar) {
  @include padding(3px);
}
{'fraction_non_alphanumeric': 0.270541461567588, 'fraction_numerical': 0.011927300265051117, 'mean_word_length': 2.2057038834951457, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5823225', 'n_tokens_mistral': 1714, 'n_tokens_neox': 1614, 'n_words': 278}