/* 같은 검색 폼을 헤더와 휴대폰 모달에서 옮겨 쓴다. 표현은 이 파일에서만 정한다. */
.header-search-submit,
.header-search-toggle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
  border-radius: 0;
  color: rgb(var(--color-gray-900));
}

.header-search-submit {
  order: 1;
  width: auto;
  height: auto;
}

.header-search-toggle {
  display: none;
}

.site-header .header-search,
.site-navigation-dialog .header-search {
  padding-inline: var(--space-md);
  border-radius: var(--radius-squircle-md);
  border-color: rgb(var(--color-primary-start));
  background: transparent;
  gap: var(--space-xs);
}

.header-search input {
  padding-inline: 0;
}

.header-search input[type="search"]::-webkit-search-cancel-button {
  mask: url("../../../assets/icons/close-s.svg") center / contain no-repeat;
}

@media (max-width: 47.99rem) {
  .site-header .header-search {
    display: none;
  }

  html[data-navigation-ready] .header-search-toggle {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
}