#block__search {
  background: white;
  padding-block: 40px 0;
}

/* Searchform */
#searchform {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name send";
  gap: 24px;

  &:has(details) {
    grid-template-areas:
      "name send"
      "details details";
  }

  #searchform__name {
    grid-area: name;
  }
  #searchform__details {
    grid-area: details;
  }
  #searchform__send {
    grid-area: send;
  }
}

#searchform__name {
  display: grid;

  label {
    text-align: center;
    grid-area: 1/1/2/2;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    font-size: 3rem;
    padding: 0.8rem 2.4rem;
    transition: 0.2s ease-out 0s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  input {
    color: var(--highlight);
    width: 100%;
    font-size: 3rem;
    text-align: center;
    grid-area: 1/1/2/2;

    &::placeholder {
      opacity: 0;
    }
  }
  &:has(input:focus),
  &:has(input:not(:placeholder-shown)) {
    label {
      transform: scale(0.5) translateY(-150%);
    }
  }
}

#searchform__send {
  position: relative;
  background: var(--primary-light);
  font-weight: bold;
  text-align: left;
  padding-block: 0;
  display: flex;
  align-items: center;
  border-color: var(--primary-light);

  span {
    overflow: hidden;
    height: 1px;
    width: 1px;
    position: absolute;
  }

  svg {
    /* position: absolute;
    top: calc(50% - 1.2rem);
    right: 2.4rem; */
    margin-block: 10px 10px;
    margin-inline: auto;
    width: 2.4rem;
    height: 2.4rem;
  }

  &:hover,
  &:focus {
    background: var(--primary);
    path {
      stroke: var(--white);
    }
  }
}

#searchform__details {
  position: relative;
  margin-bottom: 0;
  border: none;
  border-radius: var(--br) var(--br) 0 0;
  background-color: var(--primary-light);
  padding: 0 2.4rem;

  &.rounded {
    border-radius: var(--br);
  }

  summary {
    margin-inline: -2.4rem;
    border-radius: var(--br) var(--br) 0 0;
    background-color: var(--primary);
    padding: 1.6rem 2.4rem 1.6rem 6.4rem;
    color: var(--white);

    &::before {
      display: block;
      position: absolute;
      top: 1.8rem;
      left: 2.4rem;
      transform: rotate(270deg) scaleX(-1);
      transition:
        opacity 0.3s,
        transform 0.3s;
      background: transparent url("../media/icon_arrow_white.svg") 0 0 no-repeat;
      background-size: 32px 32px;
      width: 32px;
      height: 32px;
      content: "";
    }
  }

  &::before,
  &::after {
    display: none;
  }

  &:open {
    padding: 0 2.4rem 2.4rem 2.4rem;

    summary::before {
      transform: rotate(270deg) scaleX(1);
    }
  }

  .form__item {
    display: grid;
    grid-template-columns: 1fr 5fr;
    margin-block: 2rem;
  }

  .searchform__two {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    margin: 0;
    width: max-content;
    max-width: 100%;
  }
}

.searchform__filtercontrol {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;

  button {
    padding: 0.8rem 1.6rem;
  }
}

/* Responsiveness */
@media (max-width: 800px) {
  #searchform {
    grid-template-areas:
      "name name"
      "send send";
    gap: 24px;

    &:has(details) {
      grid-template-areas:
        "name name"
        "send send"
        "details details";
    }

    .form__item {
      grid-template-columns: 1fr;
    }

    .searchform__two {
      display: block;
      .form__item {
        grid-template-columns: 1fr 5fr;
      }
    }
  }
}

@media (max-width: 400px) {
  #searchform {
    .form__item {
      display: grid;

      input {
        width: 100%;
      }
    }

    .searchform__two .form__item {
      display: grid;
      grid-template-columns: 1fr 5fr;
    }
  }
}