// Search field, consisting of input and other field-related elements

.search-field-container {
  position: relative;
}

.search-field {
  width: 100%;
  border: solid $app-border-width $search-field-unfocus-color;
  padding: 6px 12px;
  padding-left: $search-field-icon-size + $search-field-icon-padding-left + $search-field-icon-padding-right;
  font-size: 16px;
  &:focus {
    outline-width: 0;
    border-color: $search-field-focus-color;
    box-shadow: 0 0 5px 1px $search-field-focus-glow-color;
  }
}

.search-field-container .search-icon {
  position: absolute;
  top: 50%;
  left: $search-field-icon-padding-left;
  transform: translateY(-$search-field-icon-size / 2);
  width: $search-field-icon-size;
  height: $search-field-icon-size;
  fill: $search-field-unfocus-color;
  .search-field:focus + & {
    fill: $search-field-focus-color;
  }
}

// Search field, consisting of input and other field-related elements

.search-field-container {
  position: relative;
}

.search-field {
  width: 100%;
  border: solid $app-border-width $search-field-unfocus-color;
  padding: 6px 12px;
  padding-left: $search-field-icon-size + $search-field-icon-padding-left + $search-field-icon-padding-right;
  font-size: 16px;
  &:focus {
    outline-width: 0;
    border-color: $search-field-focus-color;
    box-shadow: 0 0 5px 1px $search-field-focus-glow-color;
  }
}

.search-icon {
  position: absolute;
  top: 50%;
  left: $search-field-icon-padding-left;
  transform: translateY(-$search-field-icon-size / 2);
  width: $search-field-icon-size;
  height: $search-field-icon-size;
  fill: $search-field-unfocus-color;
  .search-field:focus + & {
    fill: $search-field-focus-color;
  }
}

Fix bug where search icon was missing focus styles
Fix bug where search icon was missing focus styles
