.text-field-block {
  max-width: 500px;
  width: calc(100% - 130px);
  height: 46px;
  border: 1px solid gray;
  padding-left: 15px;
  border-right: 0;
  border-radius: 9999px 0 0 9999px;
  box-sizing: border-box;
  background: var(--md-sys-color-surface);
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 10px;
}
.text-field {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 16px;
  padding: 16px 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  outline: 0;
}
.text-field-box:focus {
  outline: 0;
  border-width: 2px;
  padding: 15px;
  }
.search_button {
  height: 46px;
  width: 130px;
  border: 0;
  --_container-shape-start-start: 0;
  --_container-shape-end-start: 0;
}
.search_button span {
  color: var(--md-sys-color-on-primary);
}
.search_button_icon {
  display: none;
}
.search_container {
  max-width: 630px;
  width: 100%;
  white-space: nowrap;
  padding: 0 20px;
  display: flex;
}
.search_mobile_chip {
  display: none;
}

@media screen and (max-width: 600px) {
  .search_button {
    width: fit-content;
    padding: 15px;
  }
  .search_button_text {
    display: none;
  }
  .search_button_icon {
    display: block;
  }
  .text-field-block {
    width: calc(100% - 0px);
  }
  .search_container {
    padding: 0 10px;
  }
  .search_chip {
    display: none;
  }
  .search_mobile_chip {
    display: block;
  }
}