@use "../../vars.scss" as *;

.search-widget {
  position: relative;
  width: 100%;

  .search-filter-button {
    right: 0.5rem;
  }

  @media (min-width: $screen-md) {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin: 0;
  }
}

.search-input-field {
  -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
  background-color: var(--background-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  color: var(--text-primary);
  height: var(--form-elem-height);
  min-width: 60px;
  padding-left: 0.5rem;
  width: 100%;

  &:focus {
    outline: var(--border-primary);
  }

  &:not([value=""]) {
    ~ .button.clear-search-button {
      display: block;
      right: 2.1rem;
    }
  }

  &::placeholder {
    color: var(--text-inactive);
  }

  .button.clear-search-button {
    display: none;
  }
}