.c-search-bar {
  position: relative;
}
@media (min-width: 1024px) {
  .c-search-bar {
    max-width: 25rem;
  }
}

.c-search-bar > .search-form__toggle {
  display: none;
}
@media (min-width: 1024px) {
  .c-search-bar > .search-form__toggle {
    display: flex;
    gap: 0.5rem;
  }
}

.c-search-bar-button {
  display: none;
}
@media (min-width: 1024px) {
  .c-search-bar-button {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: block;
    transition: all 300ms ease-in-out;
  }
  .c-search-bar-button:hover, .c-search-bar-button[aria-expanded=true] {
    transition: all 300ms ease-in-out;
  }
  .c-search-bar-button[aria-expanded=true] .icon.close {
    display: block;
  }
  .c-search-bar-button[aria-expanded=true] .icon.open {
    display: none;
  }
  .c-search-bar-button[aria-expanded=false] .icon.close {
    display: none;
  }
  .c-search-bar-button[aria-expanded=false] .icon.open {
    display: block;
  }
}

.c-search-bar-content {
  display: flex;
  flex-flow: row;
  gap: 0;
  justify-content: center;
  padding: 1.25rem;
  position: relative;
}
.c-search-bar-content > div,
.c-search-bar-content form > div {
  max-width: 100%;
}
@media (min-width: 1024px) {
  .c-search-bar-content {
    width: 25rem;
  }
}
.c-search-bar-content form {
  align-items: center;
  background-color: var(--si-color-white);
  display: flex;
  flex-flow: row;
  gap: 0;
  width: 100%;
}
.c-search-bar-content input.form-item__search {
  width: 100%;
}
.c-search-bar-content .form-actions {
  margin: 0;
}
.c-search-bar-content .form-actions input {
  padding-block: 13px;
}
.c-search-bar-content .form-actions input:nth-child(2) {
  display: none;
}
@media (min-width: 768px) {
  .c-search-bar-content {
    padding: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .c-search-bar-content {
    align-items: normal;
    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.2);
    margin-top: 1rem;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: var(--si-zindex-over);
  }
  .c-search-bar-content input.form-item__search {
    background-color: var(--si-color-white);
  }
  .c-search-bar-content[aria-hidden=true] {
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 350ms cubic-bezier(0.4, 0, 0.2, 1), transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s;
  }
  .c-search-bar-content[aria-hidden=false] {
    opacity: 1;
    overflow: visible;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), visibility 350ms cubic-bezier(0.4, 0, 0.2, 1), transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s;
  }
}