Untitled

            <ul className="flex gap-3 pt-0.5 text-[14.5px] font-medium text-[#535660]">
              <li className="relative">
                <button
                  onClick={(): void => sortHandler('most-relevant')}
                  className={`duration-400 transition-all hover:text-gray-800 ${
                    atomStateGlobalSearchQueries.sort === 'most-relevant'
                      ? 'pointer-events-none font-semibold !text-c-deep-sky-blue after:absolute after:inset-x-0 after:-bottom-[12px] after:h-[3px] after:w-full after:rounded-full after:bg-c-deep-sky-blue'
                      : ''
                  }`}
                >
                  مرتبط ترین
                </button>
              </li>
              <li className="relative">
                <button
                  onClick={(): void => sortHandler('best-selling')}
                  className={`duration-400 transition-all hover:text-gray-800 ${
                    atomStateGlobalSearchQueries.sort === 'best-selling'
                      ? 'pointer-events-none font-semibold !text-c-deep-sky-blue after:absolute after:inset-x-0 after:-bottom-[12px] after:h-[3px] after:w-full after:rounded-full after:bg-c-deep-sky-blue'
                      : ''
                  }`}
                >
                  پر فروش ترین
                </button>
              </li>
              <li className="relative">
                <button
                  onClick={(): void => sortHandler('highest-price')}
                  className={`duration-400 transition-all hover:text-gray-800 ${
                    atomStateGlobalSearchQueries.sort === 'highest-price'
                      ? 'pointer-events-none font-semibold !text-c-deep-sky-blue after:absolute after:inset-x-0 after:-bottom-[12px] after:h-[3px] after:w-full after:rounded-full after:bg-c-deep-sky-blue'
                      : ''
                  }`}
                >
                  گران ترین
                </button>
              </li>
              {/* hide in mobile and show in sm */}
              <li className="relative hidden sm:block">
                <button
                  onClick={(): void => sortHandler('lowest-price')}
                  className={`duration-400 transition-all hover:text-gray-800 ${
                    atomStateGlobalSearchQueries.sort === 'lowest-price'
                      ? 'pointer-events-none font-semibold !text-c-deep-sky-blue after:absolute after:inset-x-0 after:-bottom-[12px] after:h-[3px] after:w-full after:rounded-full after:bg-c-deep-sky-blue'
                      : ''
                  }`}
                >
                  ارزان ترین
                </button>
              </li>
            </ul>