// Search entry

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

%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(theme-color.$on-dark);
  selection-background-color: theme-color.stroke(theme-color.$on-dark);
  selected-color: theme-color.$on-dark;
  @include drawing.entry(normal, $fc: theme-color.stroke(theme-color.$on-dark));

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

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

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

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

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

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