.p-header__search {
  position: absolute;
  z-index: 450;
  inset: 100% 0 auto 0;
  padding: var(--v-layout__container-padding);
  background-color: var(--v-color__2);
  border-top: 5px solid var(--v-color__4);
  box-shadow: var(--v-shadow__bottom);

  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem);
  transition: var(--v-transition__default);
}

body.is-search-open .p-header__search {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

body.is-search-open .p-header__button-search {
  color: var(--v-color__3);
}

.p-header__search-form {
  --search-button-size: 4rem;

  flex: 0 0 100%;
  position: relative;
}

.p-header__search-form-field {
  position: relative;
  z-index: 10;
  padding-right: calc( var(--search-button-size) + var(--field-padding-rl) ) !important;
  transition: var(--v-transition__default);
}

.p-header__search-form-button {
  position: absolute;
  z-index: 20;
  inset: 0 0 0 auto;
  width: var(--search-button-size);
  cursor: pointer;
  font-size: 110%;
  margin: 0;
  height: auto;
}

.p-header__search-icon {
  margin-left: auto;
}

@media (min-width: 1000px) {
  .p-header__search {
    flex: 1 0 auto;
    position: static;
    padding: 0;
    background-color: transparent;
    border-top: none;
    box-shadow: none;

    visibility: visible;
    opacity: 1;
    transform: none;
  }

  body.is-scrolled .p-header__search-form-field {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .p-header__search-icon {
    display: none;
  }
}