@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

input.search-field {
  position: relative;
  display: block;
  border-radius: var(--border-radius-md) var(--border-radius-xl) var(--border-radius-xl) var(--border-radius-md);
  width: calc(100% - 1px);
  height: 80px;
  background-color: var(--swatches-neutrals-white);
  padding: 24px 90px 24px 24px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
  line-height: 32px;
  color: var(--color-text);
  border: 2px solid var(--color-text-accent);
  transition: 0.25s ease;
  @include focus-visible;

  @media(max-width: 767px) {
    height: 70px;
    padding: 10px 50px 10px 16px;
    font-size: 18px;
    line-height: 30px;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  &:focus, &:active, &.focus-visible, &.focus-visible:focus {
    box-shadow: 0 0 10px var(--color-text-accent), 0 0 4px var(--color-text-accent);
  }

  &::-webkit-input-placeholder {
    color: var(--color-text-accent);
  }

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

  &:-ms-input-placeholder {
    color: var(--color-text-accent);
  }

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

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px var(--swatches-neutrals-white) inset !important;
  }

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    display: none;
  }
}
