.form-item {
  position: relative;
  width: 100%;

  .form-label {
    color: inherit;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: var(--space-md);
    transition: var(--transition-fast);

    @media (width < 1024px) {
      font-size: var(--font-size-base);
    }

    @media (width >= 1024px) {
      font-size: var(--font-size-lg);
    }

    &.form-required {
      padding-right: var(--space-sm);

      &::after {
        color: inherit;
        content: "*";
        height: 0.6rem;
        line-height: 1;
        position: absolute;
        right: 0;
        top: 0;
        width: 0.6rem;
      }
    }
  }

  input:not([type="submit"]),
  textarea {
    background-color: transparent;
    border-bottom: 0.2rem solid var(--color-text-primary);
    color: inherit;
    font-family: inherit;
    font-weight: var(--font-weight-normal);
    outline: none;
    padding-block: var(--space-md);
    transition: var(--transition-fast);
    width: 100%;

    @media (width < 1024px) {
      font-size: var(--font-size-base);
    }

    @media (width >= 1024px) {
      font-size: var(--font-size-lg);
    }

    &:-webkit-autofill,
    &:-webkit-autofill {
      background-color: var(--color-transparent) !important;
      -webkit-box-shadow: 0 0 0px 1000px var(--color-transparent) inset;
      color: inherit !important;
      -webkit-text-fill-color: var(--color-text-default) !important;
      transition: background-color 9999s ease-in-out 0s;

      @media (width < 1024px) {
        font-size: var(--font-size-base) !important;
      }

      @media (width >= 1024px) {
        font-size: var(--font-size-lg) !important;
      }
    }
  }

  input:not([type="search"]):not([type="submit"]),
  textarea {

    &::placeholder {
      color: transparent;
    }

    &:focus,
    &:valid,
    &:not(:placeholder-shown) {
      border-bottom: 0.2rem solid var(--color-accent);

      & + label {
        color: var(--color-accent);
        font-weight: var(--font-weight-medium);
        top: var(--space-neg-md);
      }
    }
  }
}

.block--search-form form,
.search-form {
  align-items: center;
  background-color: transparent;
  color: var(--color-text-primary);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 40rem;
  overflow: hidden;

  @media (width < 1024px) {

    input[type="search"] {
      padding-inline: var(--space-sm);

      &:focus {
        border-bottom: 0.2rem solid var(--color-accent);
      }
    }
  }

  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  input[type="submit"] {
    background-color: transparent;
    background-image: url(../../../assets/svg/search.svg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 5.8rem;
    text-indent: -9999.9rem;
    width: 5.8rem;
  }
}