.search-input-container {
  display: flex;
  align-items: center;
  overflow: visible;

  &:before {
    top: unset !important;
    inset-inline-start: calc(var(--input-height) / 2 - 4px);
  }

  input {
    padding-inline-start: var(--input-height) !important;
    width: 100%;
  }
}

.search-input-container:before,
.prompt-input-container::before,
.empty-state .empty-state-action:nth-child(2)::before {
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;

  background-color: var(--search-icon-color);
  width: var(--search-icon-size);
  height: var(--search-icon-size);
  content: "";

  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='white' d='M0 7.793c0 4.297 3.496 7.793 7.793 7.793 1.7 0 3.252-.547 4.531-1.465l4.805 4.815c.224.224.517.332.83.332.664 0 1.123-.498 1.123-1.153a1.118 1.118 0 0 0-.322-.8l-4.776-4.805a7.703 7.703 0 0 0 1.602-4.717C15.586 3.496 12.09 0 7.793 0 3.496 0 0 3.496 0 7.793Zm1.67 0A6.127 6.127 0 0 1 7.793 1.67a6.127 6.127 0 0 1 6.123 6.123 6.127 6.127 0 0 1-6.123 6.123A6.127 6.127 0 0 1 1.67 7.793Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

body:not(.is-mobile) {
  textarea {
    font-weight: var(--font-normal);
    line-height: unset;
  }
  input[type="text"],
  input[type="number"],
  input[type="search"],
  select,
  .dropdown {
    height: var(--input-height);
    font-weight: var(--font-normal);
    line-height: unset;
  }
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="search"] {
    box-shadow: none;
    border: var(--border-width) solid var(--background-modifier-border);

    &:active,
    &:focus,
    &:focus-visible {
      box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
    }

    &:disabled,
    &:disabled:active,
    &:disabled:focus,
    &:disabled:focus-visible {
      box-shadow: none !important;
      color: var(--text-muted);
    }
  }
  select,
  .dropdown {
    padding: 4px 32px 4px 12px;
    box-shadow: none;
    border: none;
  }

  .search-input-container {
    --search-icon-size: var(--icon-xs);
  }
  .combobox .search-input-container {
    margin: 0;
  }
}

body.is-mobile {
  select,
  .dropdown,
  .combobox-button {
    box-shadow: none !important;
  }
}

body.is-phone:not(.is-android:not(.material-off)) {
  textarea,
  input[type="text"],
  input[type="number"],
  select,
  .dropdown,
  .combobox-button {
    justify-content: flex-start;
    background-color: var(--interactive-normal);
    padding: 0 var(--side-padding);
    min-height: var(--input-height);
    font-weight: var(--font-normal);
    text-align-last: unset;
  }

  select,
  .dropdown,
  .combobox-button {
    color: var(--text-accent);
  }
}

body.is-tablet:not(.is-android:not(.material-off)) {
  textarea,
  input[type="text"],
  input[type="number"] {
    padding: 4px var(--side-padding);
  }
}
