// Search entry

@use "../../../../theme";
@use "../../../../theme-color";
@use "../../gnome-shell";
@use "../../drawing";
@use "overview";

%search-entry,
.search-entry {
  width: 320px - 8px * 2;
  padding: 0 8px;
  border-radius: theme.$corner-radius theme.$corner-radius 0 0;
  color: theme-color.disabled(overview.$on-color);
  selection-background-color: theme-color.stroke(overview.$on-color);
  selected-color: overview.$on-color;
  @include drawing.entry(normal, $fc: theme-color.stroke(overview.$on-color));

  @if gnome-shell.$version >= 40 {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  &:hover {
    @include drawing.entry(hover, $fc: theme-color.stroke(overview.$on-color));
    color: theme-color.disabled(overview.$on-color);
  }

  &:focus {
    @include drawing.entry(focus, $fc: overview.$on-color);
    padding: 0 8px;
    border: 0;
    color: overview.$on-color;
  }

  StLabel.hint-text {
    color: theme-color.hint(overview.$on-color);
  }

  .search-entry-icon {
    icon-size: 16px;
    padding: 0 4px;
    color: theme-color.hint(overview.$on-color);
  }

  &:hover,
  &:focus {
    .search-entry-icon {
      color: overview.$on-color;
    }
  }
}