.search-input-view {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  gap: var(--spacing-8);
}

.search-input-view[data-size='medium'] {
  --search-input-padding: var(--spacing-8);
}

.search-input-view[data-size='large'] {
  --search-input-padding: var(--spacing-12);
}

.search-input-view.search-input-has-button {
  flex-grow: 1;
}

.search-input-view:not(.search-input-has-button) {
  flex: 1;
}

.search-input-view .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  --edge-fade-ground: var(--background-color-base);
  --edge-fade-inset-start: calc(var(--border-width-base) + var(--search-input-padding));
  --edge-fade-inset-end: calc(var(--border-width-base) + var(--search-input-padding));
}

.search-input-view.search-input-has-controls .search-input-wrapper {
  --edge-fade-inset-end: calc((((var(--border-width-base) + var(--search-input-padding)) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8))) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8))) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8)));
}

.search-input-view .search-input-wrapper:has(> .search-input:disabled) {
  --edge-fade-ground: var(--background-color-disabled);
}

.search-input-view .search-input-wrapper::before, .search-input-view .search-input-wrapper::after {
  content: "";
  position: absolute;
  top: var(--border-width-base);
  bottom: var(--border-width-base);
  width: var(--size-edge-fade);
  pointer-events: none;
  opacity: 0;
}

.search-input-view .search-input-wrapper::before {
  inset-inline-start: var(--edge-fade-inset-start);
  background-image: linear-gradient(to left, transparent, var(--edge-fade-ground));
}

.search-input-view .search-input-wrapper::after {
  inset-inline-end: var(--edge-fade-inset-end);
  background-image: linear-gradient(to right, transparent, var(--edge-fade-ground));
}

.search-input-view .search-input-wrapper:dir(rtl)::before {
  background-image: linear-gradient(to right, transparent, var(--edge-fade-ground));
}

.search-input-view .search-input-wrapper:dir(rtl)::after {
  background-image: linear-gradient(to left, transparent, var(--edge-fade-ground));
}

.search-input-view .search-input-wrapper:has(> .search-input[data-overflowing='true'][data-overflowing-start='true']:not(:focus))::before {
  opacity: 1;
}

.search-input-view .search-input-wrapper:has(> .search-input[data-overflowing='true'][data-overflowing-end='true']:not(:focus))::after {
  opacity: 1;
}

.search-input-view.search-input-has-button .search-input-wrapper {
  flex-grow: 1;
}

.search-input-view:not(.search-input-has-button) .search-input-wrapper {
  width: 100%;
}

.search-input-view .search-input {
  width: 100%;
  padding: var(--search-input-padding);
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-base);
  background-color: var(--background-color-base);
  border: var(--border-width-base) solid var(--border-color-base);
  border-radius: var(--border-radius-base);
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
  box-sizing: border-box;
}

.search-input-view.search-input-has-controls .search-input {
  padding-inline-end: calc(((var(--search-input-padding) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8))) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8))) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8)));
}

.search-input-view.search-input-error .search-input {
  border-color: var(--border-color-red);
}

.search-input-view .search-input::-webkit-search-cancel-button {
  display: none !important;
}

.search-input-view .search-input::placeholder {
  color: var(--color-placeholder) !important;
  opacity: 1 !important;
}

.search-input-view .search-input:disabled::placeholder {
  color: var(--color-disabled) !important;
  -webkit-text-fill-color: var(--color-disabled) !important;
}

.search-input-view .search-input:focus {
  outline: var(--border-width-base) solid var(--border-color-blue) !important;
  outline-offset: -2px !important;
  border-color: var(--border-color-blue) !important;
}

.search-input-view .search-input:disabled {
  background-color: var(--background-color-disabled) !important;
  color: var(--color-disabled) !important;
  border-color: var(--border-color-disabled) !important;
  cursor: var(--cursor-not-allowed) !important;
}

.search-input-view .search-input-details-icon {
  position: absolute;
  inset-inline-end: calc(var(--search-input-padding) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8)));
  top: 50%;
  transform: translateY(-50%);
  padding: var(--spacing-4);
  color: var(--color-subtle);
  display: flex;
  align-items: center;
}

.search-input-view .search-input-clear-button {
  position: absolute;
  inset-inline-end: calc((var(--search-input-padding) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8))) + (((var(--size-icon-small) + var(--spacing-4)) + var(--spacing-4)) + var(--spacing-8)));
  top: 50%;
  transform: translateY(-50%);
  padding: var(--spacing-4);
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-base);
  cursor: var(--cursor-base-hover);
  color: var(--color-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
}

.search-input-view .search-input-clear-button:hover:not(:disabled) {
  color: var(--color-blue) !important;
  cursor: var(--cursor-base-hover) !important;
}

.search-input-view .search-input-clear-button:hover:not(:disabled) .icon-view {
  color: var(--color-blue) !important;
}

.search-input-view .search-input-clear-button:active:not(:disabled) {
  color: var(--color-base) !important;
}

.search-input-view .search-input-clear-button:focus {
  outline: var(--border-width-base) solid var(--outline-color-blue-focus) !important;
  outline-offset: 4px !important;
}

.search-input-view .search-input-clear-button:disabled {
  opacity: var(--opacity-icon-base-disabled) !important;
  color: var(--color-disabled) !important;
  cursor: default !important;
}

.search-input-view .search-input-clear-button:disabled .icon-view, .search-input-view .search-input-clear-button:disabled .icon-view:hover {
  color: var(--color-disabled) !important;
}

.search-input-view .search-input-search-icon {
  position: absolute;
  inset-inline-end: var(--search-input-padding);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--color-subtle);
  cursor: var(--cursor-base-hover);
  padding: var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.search-input-view .search-input-button {
  align-self: stretch;
  box-sizing: border-box;
  padding: var(--search-input-padding);
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-small-22);
  color: var(--color-blue);
  background-color: transparent;
  border: var(--border-width-base) solid var(--border-color-blue);
  border-radius: var(--border-radius-base);
  cursor: var(--cursor-base-hover);
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
  white-space: nowrap;
}

.search-input-view .search-input-button:disabled {
  color: var(--color-disabled);
  border-color: var(--border-color-disabled);
  cursor: var(--cursor-not-allowed);
}

.search-input-view .search-input-button:hover:not(:disabled) {
  background-color: var(--background-color-blue-subtle) !important;
}

.search-input-view .search-input-button:active:not(:disabled) {
  background-color: var(--background-color-blue-active) !important;
  color: var(--color-inverted) !important;
  border-color: var(--border-color-blue-active) !important;
}

.search-input-view .search-input-button:focus:not(:disabled) {
  outline: var(--border-width-thick) solid var(--border-color-blue) !important;
  outline-offset: 1px !important;
}

@media (max-width: 479px) {
  :root[data-phone-step='down'] .search-input-view[data-size='medium'] {
    --search-input-padding: var(--spacing-4) !important;
    --size-icon-small: var(--font-size-small-14) !important;
  }

:root[data-phone-step='down'] .search-input-view[data-size='medium'] .search-input, :root[data-phone-step='down'] .search-input-view[data-size='medium'] .search-input-button {
    font-size: var(--font-size-small-14) !important;
  }
}