.search-form {
  --search-form-width: 100%;

  @media (min-width: 64rem) {
    --search-form-width: calc(var(--anrt-vertical-rhythm-unit) * 341 / 24); /* 341px */

    margin-right: var(--anrt-spacing-133);
  }
}

.search-form input[type="search"] {
  --offset: calc(var(--anrt-spacing-050) + var(--anrt-spacing-008));

  width: var(--search-form-width);
  max-width: 100%;
  height: calc(var(--anrt-spacing-175) + var(--anrt-spacing-016));
  margin-bottom: var(--anrt-spacing-166);
  color: currentColor;
  border: 1px solid currentColor;
  border-radius: var(--anrt-radius-full);
  background: url("/themes/custom/slimline/assets/icons/svg/custom/search.svg") top var(--offset) left var(--offset) no-repeat transparent;
  font-size: 1rem;
  padding-inline: var(--anrt-spacing-175) var(--anrt-spacing-033);

  &::placeholder {
    color: currentColor;
  }

  :where(.page--grey) & {
    background-image: url("/themes/custom/slimline/assets/icons/svg/custom/search-black.svg");
  }
  :where(.page--grey .nav-mobile) & {
    background-image: url("/themes/custom/slimline/assets/icons/svg/custom/search.svg");
  }
}

:where(body:not(.page--grey)) .search-form input[type="search"]::-webkit-search-cancel-button {
  width: 16px;
  height: 16px;
  background-image: url("/themes/custom/slimline/assets/icons/svg/custom/circle-x.svg");
  -webkit-appearance: none;
}

.search-form--blog {
  & form {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: var(--anrt-spacing-150);

    .form-item-k {
      margin-bottom: var(--anrt-spacing-100);
    }

    & .form-actions {
      display: none;
    }

    & input[type="search"] {
      margin-bottom: 0;
    }

    @media (min-width: 64rem) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .form-item-cat {
        max-width: calc(25 * var(--anrt-spacing-100));
      }

      .form-item-k {
        margin-bottom: 0;
      }
    }
  }

  @media (min-width: 64rem) {
    --search-form-width: calc(var(--anrt-vertical-rhythm-unit) * 7.875); /* 189px */

    margin-right: 0;
  }
}

.search-form--header {
  --search-form-width: 100%;
  & input [type="search"] {
    width: 100%;
  }
  @media (min-width: 64rem) {
    --search-form-width: calc(var(--anrt-spacing-500) - var(--anrt-spacing-016)); /* 116px */

    & input[type="search"] {
      max-width: none;
      margin-bottom: 0;

      &::-webkit-search-cancel-button {
        display: none;
      }

      &:hover,
      &:focus {
        --expand: var(--anrt-spacing-100);

        margin-inline: calc(-1 * var(--expand));
        width: calc(var(--search-form-width) + 2 * var(--expand));

        &::-webkit-search-cancel-button {
          display: block;
        }
      }
    }
  }
}

.search-form--search-page {
  & input[type="submit"] {
    display: none;
  }
}