/*SEARCH BAR*/
.searchContainer {
  --search-background: #fff;
  --search-clip-path: polygon(2% 0, 98% 0, 100% 50%, 98% 100%, 2% 100%, 0 50%);
  --search-icon-left: 1.5rem;
  --search-icon-padding: 0.5rem;
  --search-input-padding: 1rem 1rem 1rem 3.5rem;
  --search-margin: 0 auto;
  --search-max-width: 40rem;

  position: relative;
  max-width: var(--search-max-width);
  margin: var(--search-margin);
}

.searchInput {
  width: 100%;
  padding: var(--search-input-padding);
  border: none;
  background-color: var(--search-background);
  color: #333;
  clip-path: var(--search-clip-path);
  box-sizing: border-box;
  font-family: "chakraPetch", sans-serif;
}

.searchInput:focus {
  outline: none;
}

.searchIcon {
  position: absolute;
  left: var(--search-icon-left);
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  cursor: pointer;
  padding: var(--search-icon-padding);
}

button.searchIcon {
  border: none;
  background: transparent;
}

.contentSearchForm .searchContainer {
  --search-background: #f9fafc;
  --search-clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
  --search-icon-left: 20px;
  --search-icon-padding: 0;
  --search-input-padding: 12px 20px 12px 48px;
  --search-margin: 0;
  --search-max-width: none;
}

.contentSearchForm .searchInput {
  font-size: 1rem;
}
/*-------------------------*/