mishka_chelekom

defmodule <%= @module %> do
  @moduledoc """
  The `<%= @module %>` module provides a comprehensive and highly customizable
  pagination component for Phoenix LiveView applications.

  It is designed to handle complex pagination scenarios, supporting various styles,
  sizes, colors, and interaction patterns.

  This module offers several options to tailor the pagination component's appearance and behavior,
  such as custom icons, separators, and control buttons.

  It allows for fine-tuning of the pagination layout, including sibling and boundary
  controls, as well as different visual variants like outlined, shadowed, and inverted styles.

  These features enable developers to integrate pagination seamlessly into their UI,
  enhancing user experience and interaction.

  **Documentation:** https://mishka.tools/chelekom/docs/pagination
  """

  use Phoenix.Component
  alias Phoenix.LiveView.JS
  import <%= inspect(@web_module) %>.Components.<%= @module_prefix_camel %>Icon, only: [<%= @component_prefix %>icon: 1]
  use Gettext, backend: <%= inspect(@web_module) %>.Gettext

  @doc """
  Renders a `pagination` component that allows users to navigate through pages.

  The component supports various configurations such as setting the total number of pages,
  current active page, and the number of sibling and boundary pages to display.

  Custom icons or labels can be used for navigation controls, and slots are available
  for additional start and end items.

  ## Examples

  ```elixir
  <.<%= @component_prefix %>pagination
    total={200}
    active={@posts.active}
    siblings={3}
    show_edges
    grouped
    next_label="next"
    previous_label="prev"
    first_label="first"
    last_label="last"
  />

  <.<%= @component_prefix %>pagination total={@posts.total} active={@posts.active} siblings={3} variant="outline" show_edges grouped/>
  ```
  """
  @doc type: :component
  attr :id, :string,
    default: nil,
    doc: "A unique identifier is used to manage state and interaction"

  attr :total, :integer, required: true, doc: ""
  attr :active, :integer, default: 1, doc: ""
  attr :siblings, :integer, default: 1, doc: ""
  attr :boundaries, :integer, default: 1, doc: ""
  attr :on_select, JS, default: %JS{}, doc: "Custom JS module for on_select action"
  attr :on_first, JS, default: %JS{}, doc: "Custom JS module for on_first action"
  attr :on_last, JS, default: %JS{}, doc: "Custom JS module for on_last action"
  attr :on_next, JS, default: %JS{}, doc: "Custom JS module for on_next action"
  attr :on_previous, JS, default: %JS{}, doc: "Custom JS module for on_previous action"

  attr :size, :string,
    default: "medium",
    doc:
      "Determines the overall size of the elements, including padding, font size, and other items"

  attr :space, :string, default: "small", doc: "Space between items"
  attr :color, :string, default: "base", doc: "Determines color theme"
  attr :rounded, :string, default: "small", doc: "Determines the border radius"
  attr :border, :string, default: "extra_small", doc: "Determines the border radius"

  attr :variant, :string, default: "base", doc: "Determines the style"

  attr :separator, :map,
    default: %{type: :icon, value: "hero-ellipsis-horizontal"},
    doc: "Separator between page groups"

  attr :first_label, :map,
    default: %{type: :icon, value: "hero-chevron-double-left"},
    doc: "Label for the 'first' button"

  attr :last_label, :map,
    default: %{type: :icon, value: "hero-chevron-double-right"},
    doc: "Label for the 'last' button"

  attr :next_label, :map,
    default: %{type: :icon, value: "hero-chevron-right"},
    doc: "Label for the 'next' button"

  attr :previous_label, :map,
    default: %{type: :icon, value: "hero-chevron-left"},
    doc: "Label for the 'previous' button"

  attr :class, :any, default: nil, doc: "Custom CSS class for additional styling"

  attr :first_label_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to first button"

  attr :next_label_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to next button"

  attr :last_label_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to last button"

  attr :prev_label_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to previous button"

  attr :pages_label_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to pages buttons"

  attr :separator_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to pages buttons"

  attr :separator_icon_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to icon of separator"

  attr :separator_text_class, :string,
    default: nil,
    doc: "Custom CSS class for additional styling to text of separator"

  attr :params, :map,
    default: %{},
    doc: "A map of additional parameters used for element configuration"

  slot :start_items, required: false, doc: "Determines the start items which accept heex"
  slot :end_items, required: false, doc: "Determines the end items which accept heex"

  attr :rest, :global,
    include: ~w(disabled hide_one_page show_edges hide_controls grouped),
    doc:
      "Global attributes can define defaults which are merged with attributes provided by the caller"

  def <%= @component_prefix %>pagination(
        %{siblings: siblings, boundaries: boundaries, total: total, active: active} = assigns
      ) do
    assigns = assign(assigns, %{siblings: build_pagination(total, active, siblings, boundaries)})

    ~H"""
    <nav
      :if={show_pagination?(@rest[:hide_one_page], @total)}
      id={@id}
      class={[
              default_classes(),
              color_variant(@variant, @color),
              border_size(@border, @variant),
              rounded_size(@rounded),
              size_class(@size),
              border_class(@color),
              (!is_nil(@rest[:grouped]) && "gap-0 grouped-pagination") || space_class(@space),
              @class
          ]}
      {@rest}
    >
      {render_slot(@start_items)}

      <.item_button
        :if={@rest[:show_edges]}
        on_action={{"first", @on_first}}
        page={{nil, @active}}
        params={@params}
        label={@first_label}
        class={@first_label_class}
        aria_label={gettext("First page")}
        disabled={@active <= 1}
      />

      <.item_button
        :if={is_nil(@rest[:hide_controls])}
        on_action={{"previous", @on_previous}}
        page={{nil, @active}}
        params={@params}
        label={@previous_label}
        class={@prev_label_class}
        aria_label={gettext("Previous page")}
        disabled={@active <= 1}
      />

      <div :for={range <- @siblings.range}>
        <%%= if is_integer(range) do %>
          <.item_button on_action={{"select", @on_select}} page={{range, @active}} params={@params} class={@pages_label_class} />
        <%% else %>
          <div class={["pagination-separator flex justify-center items-center", @separator_class]} aria-hidden="true">
            <.<%= @component_prefix %>icon
                :if={Map.get(@separator, :type) == :icon}
                name={@separator.value}
                class={["pagination-icon", @separator_icon_class]}
              />
            <span :if={Map.get(@separator, :type) != :icon} class={["pagination-text", @separator_text_class]}>
              {@separator.value}
            </span>
          </div>
        <%% end %>
      </div>

      <.item_button
        :if={is_nil(@rest[:hide_controls])}
        on_action={{"next", @on_next}}
        page={{nil, @active}}
        params={@params}
        label={@next_label}
        class={@next_label_class}
        aria_label={gettext("Next page")}
        disabled={@active >= @total}
      />

      <.item_button
        :if={@rest[:show_edges]}
        on_action={{"last", @on_last}}
        page={{nil, @active}}
        params={@params}
        label={@last_label}
        class={@last_label_class}
        aria_label={gettext("Last page")}
        disabled={@active >= @total}
      />

      {render_slot(@end_items)}
    </nav>
    """
  end

  @doc type: :component
  attr :params, :map,
    default: %{},
    doc: "A map of additional parameters used for element configuration"

  attr :page, :list, required: true, doc: "Specifies pagination pages"
  attr :on_action, JS, default: %JS{}, doc: "Custom JS module for on_action action"
  attr :label, :string, required: false, doc: "Icon displayed alongside of an item"
  attr :disabled, :boolean, required: false, doc: "Specifies whether the element is disabled"
  attr :aria_label, :string, default: nil, doc: "Accessible label for screen readers"
  attr :class, :any, default: nil, doc: "Custom class for additional styling"

  defp item_button(%{on_action: {"select", _on_action}} = assigns) do
    ~H"""
    <button
      aria-current={elem(@page, 1) == elem(@page, 0) && "page"}
      aria-label={
        if elem(@page, 1) == elem(@page, 0) do
          gettext("Page %{page}, current page", page: elem(@page, 0))
        else
          gettext("Go to page %{page}", page: elem(@page, 0))
        end
      }
      aria-disabled={elem(@page, 0) == elem(@page, 1)}
      class={[
        "pagination-button cursor-pointer",
        elem(@page, 1) == elem(@page, 0) && "active-pagination-button",
        @class
      ]}
      phx-click={
        elem(@on_action, 1)
        |> JS.push("pagination", value: Map.merge(%{action: "select", page: elem(@page, 0)}, @params))
      }
      disabled={elem(@page, 0) == elem(@page, 1)}
    >
      {elem(@page, 0)}
    </button>
    """
  end

  defp item_button(assigns) do
    ~H"""
    <button
      class={["pagination-control flex items-center justify-center cursor-pointer", @class]}
      aria-disabled={@disabled}
      aria-label={@aria_label}
      phx-click={
        elem(@on_action, 1)
        |> JS.push("pagination", value: Map.merge(%{action: elem(@on_action, 0)}, @params))
      }
      disabled={@disabled}
    >
      <.<%= @component_prefix %>icon :if={Map.get(@label, :type) == :icon} name={@label.value} class="pagination-icon" />
      <span :if={Map.get(@label, :type) != :icon} class="pagination-text">{@label.value}</span>
    </button>
    """
  end

  # We got the original code from mantine.dev pagination hook and changed some numbers
  defp build_pagination(total, current_page, siblings, boundaries) do
    total_pages = max(total, 0)

    total_page_numbers = siblings * 2 + 3 + boundaries * 2

    pagination_range =
      if total_page_numbers >= total_pages do
        range(1, total_pages)
      else
        left_sibling_index = max(current_page - siblings, boundaries + 1)
        right_sibling_index = min(current_page + siblings, total_pages - boundaries)

        should_show_left_dots = left_sibling_index > boundaries + 2
        should_show_right_dots = right_sibling_index < total_pages - boundaries - 1

        dots = :dots

        cond do
          !should_show_left_dots and should_show_right_dots ->
            left_item_count = siblings * 2 + boundaries + 2

            range(1, left_item_count) ++
              [dots] ++ range(total_pages - boundaries + 1, total_pages)

          should_show_left_dots and not should_show_right_dots ->
            right_item_count = boundaries + 1 + 2 * siblings

            range(1, boundaries) ++
              [dots] ++ range(total_pages - right_item_count + 1, total_pages)

          true ->
            range(1, boundaries) ++
              [dots] ++
              range(left_sibling_index, right_sibling_index) ++
              [dots] ++ range(total_pages - boundaries + 1, total_pages)
        end
      end

    %{range: pagination_range(current_page, pagination_range), active: current_page}
  end

  defp pagination_range(active, range) do
    if active != 1 and (active - 1) not in range do
      index = Enum.find_index(range, &(&1 == active))
      List.insert_at(range, index, active - 1)
    else
      range
    end
  end

  defp range(start, stop) when start > stop, do: []
  defp range(start, stop), do: Enum.to_list(start..stop)

  defp space_class("extra_small"), do: "gap-2"
  defp space_class("small"), do: "gap-3"
  defp space_class("medium"), do: "gap-4"
  defp space_class("large"), do: "gap-5"
  defp space_class("extra_large"), do: "gap-6"
  defp space_class("none"), do: nil
  defp space_class(params) when is_binary(params), do: params

  defp border_size(_, variant)
    when variant in [
          "default",
          "shadow",
          "transparent",
          "subtle",
          "gradient",
        ],
    do: nil

  defp border_size("none", _), do: "[&:not(.grouped-pagination)_.pagination-button]:border-0"

  defp border_size("extra_small", _), do: "[&:not(.grouped-pagination)_.pagination-button]:border"

  defp border_size("small", _), do: "[&:not(.grouped-pagination)_.pagination-button]:border-2"

  defp border_size("medium", _), do: "[&:not(.grouped-pagination)_.pagination-button]:border-[3px]"

  defp border_size("large", _), do: "[&:not(.grouped-pagination)_.pagination-button]:border-4"

  defp border_size("extra_large", _), do: "[&:not(.grouped-pagination)_.pagination-button]:border-[5px]"

  defp border_size(params, _) when is_binary(params), do: params

  <%= if is_nil(@color) or "transparent" in @color do %>
  defp border_class("transparent") do
    ["[&.grouped-pagination]:border border-transparent"]
  end
  <% end %>

  <%= if is_nil(@color) or "base" in @color do %>
  defp border_class("base") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "border-base-border-light [&.grouped-pagination_.pagination-button]:border-base-border-light",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-base-border-light",
      "[&.grouped-pagination_.pagination-separator]:border-base-border-light",
      "dark:border-base-border-dark dark:[&.grouped-pagination_.pagination-button]:border-base-border-dark",
      "dark:[&.grouped-pagination_.pagination-control:not(:last-child)]:border-base-border-dark",
      "dark:[&.grouped-pagination_.pagination-separator]:border-base-border-dark"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp border_class("natural") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-natural-dark [&.grouped-pagination_.pagination-button]:border-natural-dark",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-natural-dark",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-natural-dark"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "primary" in @color do %>
  defp border_class("primary") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-[var(--color-secondary-light)] [&.grouped-pagination_.pagination-button]:border-[var(--color-secondary-hover-light)]",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-[var(--color-secondary-hover-light)]",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-[var(--color-secondary-hover-light)]"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "secondary" in @color do %>
  defp border_class("secondary") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-slate-500 [&.grouped-pagination_.pagination-button]:border-slate-700",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-slate-700",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-slate-700"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "success" in @color do %>
  defp border_class("success") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-emerald-700 [&.grouped-pagination_.pagination-button]:border-emerald-700",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-emerald-700",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-emerald-700"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "warning" in @color do %>
  defp border_class("warning") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-warning-indicator-light [&.grouped-pagination_.pagination-button]:border-warning-indicator-light",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-warning-indicator-light",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-warning-indicator-light"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "danger" in @color do %>
  defp border_class("danger") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-danger-indicator-light [&.grouped-pagination_.pagination-button]:border-danger-indicator-light",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-danger-indicator-light",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-danger-indicator-light"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "info" in @color do %>
  defp border_class("info") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-info-indicator-light [&.grouped-pagination_.pagination-button]:border-info-indicator-light",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-info-indicator-light",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-info-indicator-light"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "misc" in @color do %>
  defp border_class("misc") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-misc-indicator-light [&.grouped-pagination_.pagination-button]:border-misc-indicator-light",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-misc-indicator-light",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-misc-indicator-light"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "dawn" in @color do %>
  defp border_class("dawn") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-dawn-indicator-light [&.grouped-pagination_.pagination-button]:border-dawn-indicator-light",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-dawn-indicator-light",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-dawn-indicator-light"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "silver" in @color do %>
  defp border_class("silver") do
    [
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-silver-indicator-light [&.grouped-pagination_.pagination-button]:border-silver-indicator-light",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-silver-indicator-light",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-silver-indicator-light"
    ]
  end
  <% end %>
  <%= if is_nil(@color) or "dark" in @color do %>
  defp border_class("dark") do
    [
      "[&.grouped-pagination]:bg-default-dark-bg [&.grouped-pagination]:text-base-text-dark",
      "[&.grouped-pagination]:border [&.grouped-pagination_.pagination-button]:border-r",
      "border-base-bg-dark [&.grouped-pagination_.pagination-button]:border-bordered-dark-border",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-r",
      "[&.grouped-pagination_.pagination-control:not(:last-child)]:border-bordered-dark-border",
      "[&.grouped-pagination_.pagination-separator]:border-r",
      "[&.grouped-pagination_.pagination-separator]:border-bordered-dark-border"
    ]
  end
  <% end %>
  defp border_class(params) when is_binary(params), do: params

  <%= if is_nil(@rounded) or "extra_small" in @rounded do %>
  defp rounded_size("extra_small"),
    do:
      "[&.grouped-pagination]:rounded-sm [&:not(.grouped-pagination)_.pagination-button]:rounded-sm"
  <% end %>
  <%= if is_nil(@rounded) or "small" in @rounded do %>
  defp rounded_size("small"),
    do: "[&.grouped-pagination]:rounded [&:not(.grouped-pagination)_.pagination-button]:rounded"
  <% end %>
  <%= if is_nil(@rounded) or "medium" in @rounded do %>
  defp rounded_size("medium"),
    do:
      "[&.grouped-pagination]:rounded-md [&:not(.grouped-pagination)_.pagination-button]:rounded-md"
  <% end %>
  <%= if is_nil(@rounded) or "large" in @rounded do %>
  defp rounded_size("large"),
    do:
      "[&.grouped-pagination]:rounded-lg [&:not(.grouped-pagination)_.pagination-button]:rounded-lg"
  <% end %>
  <%= if is_nil(@rounded) or "extra_large" in @rounded do %>
  defp rounded_size("extra_large"),
    do:
      "[&.grouped-pagination]:rounded-xl [&:not(.grouped-pagination)_.pagination-button]:rounded-xl"
  <% end %>
  <%= if is_nil(@rounded) or "full" in @rounded do %>
  defp rounded_size("full"),
    do:
      "[&.grouped-pagination]:rounded-full [&:not(.grouped-pagination)_.pagination-button]:rounded-full"
  <% end %>
  <%= if is_nil(@rounded) or "none" in @rounded do %>
  defp rounded_size("none"),
    do:
      "[&.grouped-pagination]:rounded-none [&:not(.grouped-pagination)_.pagination-button]:rounded-none"
  <% end %>

  <%= if is_nil(@size) or "extra_small" in @size do %>
  defp size_class("extra_small") do
    [
      "[&.grouped-pagination_.pagination-button]:w-full [&.grouped-pagination_.pagination-button]:px-3",
      "[&:not(.grouped-pagination)_.pagination-button]:w-6",
      "[&.grouped-pagination_.pagination-button]:min-w-6 [&.grouped-pagination_.pagination-control]:min-w-6",
      "[&_.pagination-button]:h-6 [&_.pagination-control>.pagination-icon]:h-6",
      "[&_.pagination-control]:px-2",
      "[&_.pagination-separator]:h-6 text-xs",
      "[&_:not(.pagination-separator)>.pagination-icon]:size-3.5"
    ]
  end
  <% end %>
  <%= if is_nil(@size) or "small" in @size do %>
  defp size_class("small") do
    [
      "[&.grouped-pagination_.pagination-button]:w-full [&.grouped-pagination_.pagination-button]:px-3",
      "[&:not(.grouped-pagination)_.pagination-button]:w-7",
      "[&.grouped-pagination_.pagination-button]:min-w-7 [&.grouped-pagination_.pagination-control]:min-w-7",
      "[&_.pagination-button]:h-7 [&_.pagination-control>.pagination-icon]:h-7",
      "[&_.pagination-control]:px-2",
      "[&_.pagination-separator]:w-full [&_.pagination-separator]:h-7 text-sm",
      "[&_:not(.pagination-separator)>.pagination-icon]:size-4"
    ]
  end
  <% end %>
  <%= if is_nil(@size) or "medium" in @size do %>
  defp size_class("medium") do
    [
      "[&.grouped-pagination_.pagination-button]:w-full [&.grouped-pagination_.pagination-button]:px-3",
      "[&:not(.grouped-pagination)_.pagination-button]:w-8",
      "[&.grouped-pagination_.pagination-button]:min-w-8 [&.grouped-pagination_.pagination-control]:min-w-8",
      "[&_.pagination-control]:px-2",
      "[&_.pagination-button]:h-8 [&_.pagination-control>.pagination-icon]:h-8",
      "[&_.pagination-separator]:w-full [&_.pagination-separator]:h-8 text-base",
      "[&_:not(.pagination-separator)>.pagination-icon]:size-5"
    ]
  end
  <% end %>
  <%= if is_nil(@size) or "large" in @size do %>
  defp size_class("large") do
    [
      "[&.grouped-pagination_.pagination-button]:w-full [&.grouped-pagination_.pagination-button]:px-3",
      "[&:not(.grouped-pagination)_.pagination-button]:w-9",
      "[&.grouped-pagination_.pagination-button]:min-w-9 [&.grouped-pagination_.pagination-control]:min-w-9",
      "[&_.pagination-control]:px-2",
      "[&_.pagination-button]:h-9 [&_.pagination-control>.pagination-icon]:h-9",
      "[&_.pagination-separator]:w-full [&_.pagination-separator]:h-9 text-lg",
      "[&_:not(.pagination-separator)>.pagination-icon]:size-6"
    ]
  end
  <% end %>
  <%= if is_nil(@size) or "extra_large" in @size do %>
  defp size_class("extra_large") do
    [
      "[&.grouped-pagination_.pagination-button]:w-full [&.grouped-pagination_.pagination-button]:px-3",
      "[&:not(.grouped-pagination)_.pagination-button]:w-10",
      "[&.grouped-pagination_.pagination-button]:min-w-10 [&.grouped-pagination_.pagination-control]:min-w-10",
      "[&_.pagination-control]:px-2",
      "[&_.pagination-button]:h-10 [&_.pagination-control>.pagination-icon]:h-10",
      "[&_.pagination-separator]:w-full [&_.pagination-separator]:h-10 text-xl",
      "[&_:not(.pagination-separator)>.pagination-icon]:size-7"
    ]
  end
  <% end %>
  defp size_class(params) when is_binary(params), do: params

  <%= if is_nil(@variant) or "base" in @variant do %>
  defp color_variant("base", _) do
    [
      "bg-white dark:bg-base-bg-dark [&_.pagination-button]:border-base-border-light [&_.pagination-button]:text-base-text-light",
      "dark:[&_.pagination-button]:border-base-border-dark dark:[&_.pagination-button]:text-base-text-dark",
      "[&_.pagination-button]:hover:bg-base-hover-light dark:[&_.pagination-button]:hover:bg-base-hover-dark",
      "[&_.pagination-button.active-pagination-button]:bg-base-hover-light dark:[&_.pagination-button.active-pagination-button]:bg-base-hover-dark"
    ]
  end
  <% end %>
  <%= if is_nil(@variant) or "default" in @variant do %>
  <%= if is_nil(@color) or "white" in @color do %>
  defp color_variant("default", "white") do
    [
      "[&_.pagination-button]:bg-white [&_.pagination-button]:text-form-white-text",
      "[&_.pagination-button]:hover:bg-natural-hover-dark",
      "[&_.pagination-button.active-pagination-button]:bg-natural-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dark" in @color do %>
  defp color_variant("default", "dark") do
    [
      "[&_.pagination-button]:bg-default-dark-bg [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-bordered-dark-border",
      "[&_.pagination-button.active-pagination-button]:bg-bordered-dark-border",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("default", "natural") do
    [
      "[&_.pagination-button]:bg-natural-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-natural-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-natural-hover-light",
      "dark:[&_.pagination-button]:bg-natural-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-natural-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-natural-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("default", "primary") do
    [
      "[&_.pagination-button]:bg-primary-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-primary-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-primary-hover-light",
      "dark:[&_.pagination-button]:bg-primary-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-primary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-primary-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("default", "secondary") do
    [
      "[&_.pagination-button]:bg-secondary-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-secondary-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-secondary-hover-light",
      "dark:[&_.pagination-button]:bg-secondary-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-secondary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-secondary-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("default", "success") do
    [
      "[&_.pagination-button]:bg-success-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-success-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-success-hover-light",
      "dark:[&_.pagination-button]:bg-success-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-success-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-success-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("default", "warning") do
    [
      "[&_.pagination-button]:bg-warning-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-warning-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-warning-hover-light",
      "dark:[&_.pagination-button]:bg-warning-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-warning-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-warning-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("default", "danger") do
    [
      "[&_.pagination-button]:bg-danger-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-danger-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-danger-hover-light",
      "dark:[&_.pagination-button]:bg-danger-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-danger-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-danger-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("default", "info") do
    [
      "[&_.pagination-button]:bg-info-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-info-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-info-hover-light",
      "dark:[&_.pagination-button]:bg-info-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-info-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-info-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("default", "misc") do
    [
      "[&_.pagination-button]:bg-misc-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-misc-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-misc-hover-light",
      "dark:[&_.pagination-button]:bg-misc-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-misc-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-misc-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("default", "dawn") do
    [
      "[&_.pagination-button]:bg-dawn-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-dawn-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-dawn-hover-light",
      "dark:[&_.pagination-button]:bg-dawn-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-dawn-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-dawn-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("default", "silver") do
    [
      "[&_.pagination-button]:bg-silver-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-silver-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-silver-hover-light",
      "dark:[&_.pagination-button]:bg-silver-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-silver-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-silver-hover-dark",
    ]
  end
  <% end %>
  <% end %>
  <%= if is_nil(@variant) or "outline" in @variant do %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("outline", "natural") do
    [
      "[&_.pagination-button]:border-natural-light [&_.pagination-button]:text-natural-light",
      "[&_.pagination-button]:hover:border-natural-hover-light [&_.pagination-button]:hover:text-natural-hover-light",
      "dark:[&_.pagination-button]:border-natural-dark dark:[&_.pagination-button]:text-natural-dark",
      "dark:[&_.pagination-button]:hover:border-natural-hover-dark dark:[&_.pagination-button]:hover:text-natural-hover-dark",
      "[&_.pagination-button.active-pagination-button]:border-natural-hover-light [&_.pagination-button.active-pagination-button]:text-natural-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:border-natural-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-natural-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("outline", "primary") do
    [
      "[&_.pagination-button]:border-primary-light [&_.pagination-button]:text-primary-light",
      "[&_.pagination-button]:hover:border-primary-hover-light [&_.pagination-button]:hover:text-primary-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-primary-hover-light [&_.pagination-button.active-pagination-button]:text-primary-hover-light",
      "dark:[&_.pagination-button]:border-primary-dark dark:[&_.pagination-button]:text-primary-dark",
      "dark:[&_.pagination-button]:hover:border-primary-hover-dark dark:[&_.pagination-button]:hover:text-primary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-primary-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-primary-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("outline", "secondary") do
    [
      "[&_.pagination-button]:border-secondary-light [&_.pagination-button]:text-secondary-light",
      "[&_.pagination-button]:hover:border-secondary-hover-light [&_.pagination-button]:hover:text-secondary-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-secondary-hover-light [&_.pagination-button.active-pagination-button]:text-secondary-hover-light",
      "dark:[&_.pagination-button]:border-secondary-dark dark:[&_.pagination-button]:text-secondary-dark",
      "dark:[&_.pagination-button]:hover:border-secondary-hover-dark dark:[&_.pagination-button]:hover:text-secondary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-secondary-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-secondary-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("outline", "success") do
    [
      "[&_.pagination-button]:border-success-light [&_.pagination-button]:text-success-light",
      "[&_.pagination-button]:hover:border-success-hover-light [&_.pagination-button]:hover:text-success-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-success-hover-light [&_.pagination-button.active-pagination-button]:text-success-hover-light",
      "dark:[&_.pagination-button]:border-success-dark dark:[&_.pagination-button]:text-success-dark",
      "dark:[&_.pagination-button]:hover:border-success-hover-dark dark:[&_.pagination-button]:hover:text-success-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-success-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-success-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("outline", "warning") do
    [
      "[&_.pagination-button]:border-warning-light [&_.pagination-button]:text-warning-light",
      "[&_.pagination-button]:hover:border-warning-hover-light [&_.pagination-button]:hover:text-warning-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-warning-hover-light [&_.pagination-button.active-pagination-button]:text-warning-hover-light",
      "dark:[&_.pagination-button]:border-warning-dark dark:[&_.pagination-button]:text-warning-dark",
      "dark:[&_.pagination-button]:hover:border-warning-hover-dark dark:[&_.pagination-button]:hover:text-warning-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-warning-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-warning-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("outline", "danger") do
    [
      "[&_.pagination-button]:border-danger-light [&_.pagination-button]:text-danger-light",
      "[&_.pagination-button]:hover:border-danger-hover-light [&_.pagination-button]:hover:text-danger-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-danger-hover-light [&_.pagination-button.active-pagination-button]:text-danger-hover-light",
      "dark:[&_.pagination-button]:border-danger-dark dark:[&_.pagination-button]:text-danger-dark",
      "dark:[&_.pagination-button]:hover:border-danger-hover-dark dark:[&_.pagination-button]:hover:text-danger-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-danger-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-danger-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("outline", "info") do
    [
      "[&_.pagination-button]:border-info-light [&_.pagination-button]:text-info-light",
      "[&_.pagination-button]:hover:border-info-hover-light [&_.pagination-button]:hover:text-info-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-info-hover-light [&_.pagination-button.active-pagination-button]:text-info-hover-light",
      "dark:[&_.pagination-button]:border-info-dark dark:[&_.pagination-button]:text-info-dark",
      "dark:[&_.pagination-button]:hover:border-info-hover-dark dark:[&_.pagination-button]:hover:text-info-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-info-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-info-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("outline", "misc") do
    [
      "[&_.pagination-button]:border-misc-light [&_.pagination-button]:text-misc-light",
      "[&_.pagination-button]:hover:border-misc-hover-light [&_.pagination-button]:hover:text-misc-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-misc-hover-light [&_.pagination-button.active-pagination-button]:text-misc-hover-light",
      "dark:[&_.pagination-button]:border-misc-dark dark:[&_.pagination-button]:text-misc-dark",
      "dark:[&_.pagination-button]:hover:border-misc-hover-dark dark:[&_.pagination-button]:hover:text-misc-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-misc-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-misc-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("outline", "dawn") do
    [
      "[&_.pagination-button]:border-dawn-light [&_.pagination-button]:text-dawn-light",
      "[&_.pagination-button]:hover:border-dawn-hover-light [&_.pagination-button]:hover:text-dawn-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-dawn-hover-light [&_.pagination-button.active-pagination-button]:text-dawn-hover-light",
      "dark:[&_.pagination-button]:border-dawn-dark dark:[&_.pagination-button]:text-dawn-dark",
      "dark:[&_.pagination-button]:hover:border-dawn-hover-dark dark:[&_.pagination-button]:hover:text-dawn-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-dawn-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-dawn-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("outline", "silver") do
    [
      "[&_.pagination-button]:border-silver-light [&_.pagination-button]:text-silver-light",
      "[&_.pagination-button]:hover:border-silver-hover-light [&_.pagination-button]:hover:text-silver-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-silver-hover-light [&_.pagination-button.active-pagination-button]:text-silver-hover-light",
      "dark:[&_.pagination-button]:border-silver-dark dark:[&_.pagination-button]:text-silver-dark",
      "dark:[&_.pagination-button]:hover:border-silver-hover-dark dark:[&_.pagination-button]:hover:text-silver-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-silver-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-silver-hover-dark",
    ]
  end
  <% end %>
  <% end %>
  <%= if is_nil(@variant) or "bordered" in @variant do %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("bordered", "natural") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-natural-light [&_.pagination-button]:text-natural-light",
      "[&_.pagination-button]:hover:border-natural-hover-light [&_.pagination-button]:hover:text-natural-hover-light",
      "dark:[&_.pagination-button]:border-natural-dark dark:[&_.pagination-button]:text-natural-dark",
      "dark:[&_.pagination-button]:hover:border-natural-hover-dark dark:[&_.pagination-button]:hover:text-natural-hover-dark",
      "[&_.pagination-button.active-pagination-button]:border-natural-hover-light [&_.pagination-button.active-pagination-button]:text-natural-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:border-natural-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-natural-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("bordered", "primary") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-primary-light [&_.pagination-button]:text-primary-light",
      "[&_.pagination-button]:hover:border-primary-hover-light [&_.pagination-button]:hover:text-primary-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-primary-hover-light [&_.pagination-button.active-pagination-button]:text-primary-hover-light",
      "dark:[&_.pagination-button]:border-primary-dark dark:[&_.pagination-button]:text-primary-dark",
      "dark:[&_.pagination-button]:hover:border-primary-hover-dark dark:[&_.pagination-button]:hover:text-primary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-primary-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-primary-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("bordered", "secondary") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-secondary-light [&_.pagination-button]:text-secondary-light",
      "[&_.pagination-button]:hover:border-secondary-hover-light [&_.pagination-button]:hover:text-secondary-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-secondary-hover-light [&_.pagination-button.active-pagination-button]:text-secondary-hover-light",
      "dark:[&_.pagination-button]:border-secondary-dark dark:[&_.pagination-button]:text-secondary-dark",
      "dark:[&_.pagination-button]:hover:border-secondary-hover-dark dark:[&_.pagination-button]:hover:text-secondary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-secondary-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-secondary-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("bordered", "success") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-success-light [&_.pagination-button]:text-success-light",
      "[&_.pagination-button]:hover:border-success-hover-light [&_.pagination-button]:hover:text-success-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-success-hover-light [&_.pagination-button.active-pagination-button]:text-success-hover-light",
      "dark:[&_.pagination-button]:border-success-dark dark:[&_.pagination-button]:text-success-dark",
      "dark:[&_.pagination-button]:hover:border-success-hover-dark dark:[&_.pagination-button]:hover:text-success-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-success-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-success-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("bordered", "warning") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-warning-light [&_.pagination-button]:text-warning-light",
      "[&_.pagination-button]:hover:border-warning-hover-light [&_.pagination-button]:hover:text-warning-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-warning-hover-light [&_.pagination-button.active-pagination-button]:text-warning-hover-light",
      "dark:[&_.pagination-button]:border-warning-dark dark:[&_.pagination-button]:text-warning-dark",
      "dark:[&_.pagination-button]:hover:border-warning-hover-dark dark:[&_.pagination-button]:hover:text-warning-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-warning-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-warning-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("bordered", "danger") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-danger-light [&_.pagination-button]:text-danger-light",
      "[&_.pagination-button]:hover:border-danger-hover-light [&_.pagination-button]:hover:text-danger-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-danger-hover-light [&_.pagination-button.active-pagination-button]:text-danger-hover-light",
      "dark:[&_.pagination-button]:border-danger-dark dark:[&_.pagination-button]:text-danger-dark",
      "dark:[&_.pagination-button]:hover:border-danger-hover-dark dark:[&_.pagination-button]:hover:text-danger-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-danger-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-danger-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("bordered", "info") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-info-light [&_.pagination-button]:text-info-light",
      "[&_.pagination-button]:hover:border-info-hover-light [&_.pagination-button]:hover:text-info-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-info-hover-light [&_.pagination-button.active-pagination-button]:text-info-hover-light",
      "dark:[&_.pagination-button]:border-info-dark dark:[&_.pagination-button]:text-info-dark",
      "dark:[&_.pagination-button]:hover:border-info-hover-dark dark:[&_.pagination-button]:hover:text-info-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-info-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-info-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("bordered", "misc") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-misc-light [&_.pagination-button]:text-misc-light",
      "[&_.pagination-button]:hover:border-misc-hover-light [&_.pagination-button]:hover:text-misc-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-misc-hover-light [&_.pagination-button.active-pagination-button]:text-misc-hover-light",
      "dark:[&_.pagination-button]:border-misc-dark dark:[&_.pagination-button]:text-misc-dark",
      "dark:[&_.pagination-button]:hover:border-misc-hover-dark dark:[&_.pagination-button]:hover:text-misc-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-misc-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-misc-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("bordered", "dawn") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-dawn-light [&_.pagination-button]:text-dawn-light",
      "[&_.pagination-button]:hover:border-dawn-hover-light [&_.pagination-button]:hover:text-dawn-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-dawn-hover-light [&_.pagination-button.active-pagination-button]:text-dawn-hover-light",
      "dark:[&_.pagination-button]:border-dawn-dark dark:[&_.pagination-button]:text-dawn-dark",
      "dark:[&_.pagination-button]:hover:border-dawn-hover-dark dark:[&_.pagination-button]:hover:text-dawn-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-dawn-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-dawn-hover-dark",
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("bordered", "silver") do
    [
      "bg-white dark:bg-default-dark-bg [&_.pagination-button]:border-silver-light [&_.pagination-button]:text-silver-light",
      "[&_.pagination-button]:hover:border-silver-hover-light [&_.pagination-button]:hover:text-silver-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-silver-hover-light [&_.pagination-button.active-pagination-button]:text-silver-hover-light",
      "dark:[&_.pagination-button]:border-silver-dark dark:[&_.pagination-button]:text-silver-dark",
      "dark:[&_.pagination-button]:hover:border-silver-hover-dark dark:[&_.pagination-button]:hover:text-silver-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-silver-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-silver-hover-dark",
    ]
  end
  <% end %>
  <% end %>
  <%= if is_nil(@variant) or "transparent" in @variant do %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("transparent", "natural") do
    [
      "[&_.pagination-button]:text-natural-light [&_.pagination-button]:hover:text-natural-hover-light",
      "dark:[&_.pagination-button]:text-natural-dark dark:[&_.pagination-button]:hover:text-natural-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-natural-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-natural-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("transparent", "primary") do
    [
      "[&_.pagination-button]:text-primary-light [&_.pagination-button]:hover:text-primary-hover-light",
      "dark:[&_.pagination-button]:text-primary-dark dark:[&_.pagination-button]:hover:text-primary-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-primary-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-primary-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("transparent", "secondary") do
    [
      "[&_.pagination-button]:text-secondary-light [&_.pagination-button]:hover:text-secondary-hover-light",
      "dark:[&_.pagination-button]:text-secondary-dark dark:[&_.pagination-button]:hover:text-secondary-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-secondary-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-secondary-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("transparent", "success") do
    [
      "[&_.pagination-button]:text-success-light [&_.pagination-button]:hover:text-success-hover-light",
      "dark:[&_.pagination-button]:text-success-dark dark:[&_.pagination-button]:hover:text-success-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-success-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-success-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("transparent", "warning") do
    [
      "[&_.pagination-button]:text-warning-light [&_.pagination-button]:hover:text-warning-hover-light",
      "dark:[&_.pagination-button]:text-warning-dark dark:[&_.pagination-button]:hover:text-warning-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-warning-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-warning-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("transparent", "danger") do
    [
      "[&_.pagination-button]:text-danger-light [&_.pagination-button]:hover:text-danger-hover-light",
      "dark:[&_.pagination-button]:text-danger-dark dark:[&_.pagination-button]:hover:text-danger-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-danger-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-danger-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("transparent", "info") do
    [
      "[&_.pagination-button]:text-info-light [&_.pagination-button]:hover:text-info-hover-light",
      "dark:[&_.pagination-button]:text-info-dark dark:[&_.pagination-button]:hover:text-info-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-info-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-info-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("transparent", "misc") do
    [
      "[&_.pagination-button]:text-misc-light [&_.pagination-button]:hover:text-misc-hover-light",
      "dark:[&_.pagination-button]:text-misc-dark dark:[&_.pagination-button]:hover:text-misc-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-misc-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-misc-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("transparent", "dawn") do
    [
      "[&_.pagination-button]:text-dawn-light [&_.pagination-button]:hover:text-dawn-hover-light",
      "dark:[&_.pagination-button]:text-dawn-dark dark:[&_.pagination-button]:hover:text-dawn-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-dawn-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-dawn-hover-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("transparent", "silver") do
    [
      "[&_.pagination-button]:text-silver-light [&_.pagination-button]:hover:text-silver-hover-light",
      "dark:[&_.pagination-button]:text-silver-dark dark:[&_.pagination-button]:hover:text-silver-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-silver-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-silver-hover-dark"
    ]
  end
  <% end %>
  <% end %>
  <%= if is_nil(@variant) or "subtle" in @variant do %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("subtle", "natural") do
    [
      "[&_.pagination-button]:text-natural-light [&_.pagination-button]:hover:text-natural-hover-light",
      "dark:[&_.pagination-button]:text-natural-dark dark:[&_.pagination-button]:hover:text-natural-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-natural-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-natural-hover-dark",
      "[&_.pagination-button]:hover:bg-natural-bg-light dark:[&_.pagination-button]:hover:bg-natural-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-natural-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-natural-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("subtle", "primary") do
    [
      "[&_.pagination-button]:text-primary-light [&_.pagination-button]:hover:text-primary-hover-light",
      "dark:[&_.pagination-button]:text-primary-dark dark:[&_.pagination-button]:hover:text-primary-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-primary-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-primary-hover-dark",
      "[&_.pagination-button]:hover:bg-primary-bordered-bg-light dark:[&_.pagination-button]:hover:bg-primary-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-primary-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-primary-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("subtle", "secondary") do
    [
      "[&_.pagination-button]:text-secondary-light [&_.pagination-button]:hover:text-secondary-hover-light",
      "dark:[&_.pagination-button]:text-secondary-dark dark:[&_.pagination-button]:hover:text-secondary-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-secondary-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-secondary-hover-dark",
      "[&_.pagination-button]:hover:bg-secondary-bordered-bg-light dark:[&_.pagination-button]:hover:bg-secondary-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-secondary-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-secondary-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("subtle", "success") do
    [
      "[&_.pagination-button]:text-success-light [&_.pagination-button]:hover:text-success-hover-light",
      "dark:[&_.pagination-button]:text-success-dark dark:[&_.pagination-button]:hover:text-success-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-success-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-success-hover-dark",
      "[&_.pagination-button]:hover:bg-success-bordered-bg-light dark:[&_.pagination-button]:hover:bg-success-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-success-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-success-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("subtle", "warning") do
    [
      "[&_.pagination-button]:text-warning-light [&_.pagination-button]:hover:text-warning-hover-light",
      "dark:[&_.pagination-button]:text-warning-dark dark:[&_.pagination-button]:hover:text-warning-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-warning-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-warning-hover-dark",
      "[&_.pagination-button]:hover:bg-warning-bordered-bg-light dark:[&_.pagination-button]:hover:bg-warning-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-warning-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-warning-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("subtle", "danger") do
    [
      "[&_.pagination-button]:text-danger-light [&_.pagination-button]:hover:text-danger-hover-light",
      "dark:[&_.pagination-button]:text-danger-dark dark:[&_.pagination-button]:hover:text-danger-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-danger-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-danger-hover-dark",
      "[&_.pagination-button]:hover:bg-danger-bordered-bg-light dark:[&_.pagination-button]:hover:bg-danger-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-danger-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-danger-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("subtle", "info") do
    [
      "[&_.pagination-button]:text-info-light [&_.pagination-button]:hover:text-info-hover-light",
      "dark:[&_.pagination-button]:text-info-dark dark:[&_.pagination-button]:hover:text-info-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-info-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-info-hover-dark",
      "[&_.pagination-button]:hover:bg-info-bordered-bg-light dark:[&_.pagination-button]:hover:bg-info-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-info-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-info-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("subtle", "misc") do
    [
      "[&_.pagination-button]:text-misc-light [&_.pagination-button]:hover:text-misc-hover-light",
      "dark:[&_.pagination-button]:text-misc-dark dark:[&_.pagination-button]:hover:text-misc-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-misc-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-misc-hover-dark",
      "[&_.pagination-button]:hover:bg-misc-bordered-bg-light dark:[&_.pagination-button]:hover:bg-misc-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-misc-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-misc-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("subtle", "dawn") do
    [
      "[&_.pagination-button]:text-dawn-light [&_.pagination-button]:hover:text-dawn-hover-light",
      "dark:[&_.pagination-button]:text-dawn-dark dark:[&_.pagination-button]:hover:text-dawn-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-dawn-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-dawn-hover-dark",
      "[&_.pagination-button]:hover:bg-dawn-bordered-bg-light dark:[&_.pagination-button]:hover:bg-dawn-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-dawn-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-dawn-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("subtle", "silver") do
    [
      "[&_.pagination-button]:text-silver-light [&_.pagination-button]:hover:text-silver-hover-light",
      "dark:[&_.pagination-button]:text-silver-dark dark:[&_.pagination-button]:hover:text-silver-hover-dark",
      "[&_.pagination-button.active-pagination-button]:text-silver-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:text-silver-hover-dark",
      "[&_.pagination-button]:hover:bg-silver-bordered-bg-light dark:[&_.pagination-button]:hover:bg-silver-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-silver-bordered-bg-light",
      "dark:[&_.pagination-button.active-pagination-button]:bg-silver-bordered-bg-dark"
    ]
  end
  <% end %>
  <% end %>
  <%= if is_nil(@variant) or "shadow" in @variant do %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("shadow", "natural") do
    [
      "[&_.pagination-button]:bg-natural-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-natural-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-natural-hover-light",
      "dark:[&_.pagination-button]:bg-natural-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-natural-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-natural-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-natural)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-natural)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("shadow", "primary") do
    [
      "[&_.pagination-button]:bg-primary-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-primary-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-primary-hover-light",
      "dark:[&_.pagination-button]:bg-primary-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-primary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-primary-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-primary)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-primary)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("shadow", "secondary") do
    [
      "[&_.pagination-button]:bg-secondary-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-secondary-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-secondary-hover-light",
      "dark:[&_.pagination-button]:bg-secondary-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-secondary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-secondary-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-secondary)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-secondary)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("shadow", "success") do
    [
      "[&_.pagination-button]:bg-success-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-success-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-success-hover-light",
      "dark:[&_.pagination-button]:bg-success-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-success-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-success-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-success)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-success)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("shadow", "warning") do
    [
      "[&_.pagination-button]:bg-warning-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-warning-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-warning-hover-light",
      "dark:[&_.pagination-button]:bg-warning-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-warning-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-warning-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-warning)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-warning)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("shadow", "danger") do
    [
      "[&_.pagination-button]:bg-danger-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-danger-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-danger-hover-light",
      "dark:[&_.pagination-button]:bg-danger-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-danger-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-danger-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-danger)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-danger)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("shadow", "info") do
    [
      "[&_.pagination-button]:bg-info-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-info-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-info-hover-light",
      "dark:[&_.pagination-button]:bg-info-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-info-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-info-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-info)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-info)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("shadow", "misc") do
    [
      "[&_.pagination-button]:bg-misc-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-misc-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-misc-hover-light",
      "dark:[&_.pagination-button]:bg-misc-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-misc-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-misc-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-misc)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-misc)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("shadow", "dawn") do
    [
      "[&_.pagination-button]:bg-dawn-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-dawn-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-dawn-hover-light",
      "dark:[&_.pagination-button]:bg-dawn-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-dawn-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-dawn-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-dawn)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-dawn)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("shadow", "silver") do
    [
      "[&_.pagination-button]:bg-silver-light [&_.pagination-button]:text-white",
      "[&_.pagination-button]:hover:bg-silver-hover-light",
      "[&_.pagination-button.active-pagination-button]:bg-silver-hover-light",
      "dark:[&_.pagination-button]:bg-silver-dark dark:[&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:hover:bg-silver-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:bg-silver-hover-dark",
      "[&_.pagination-button]:shadow-[0px_4px_6px_-4px_var(--color-shadow-silver)] [&_.pagination-button]:shadow-[0px_10px_15px_-3px_var(--color-shadow-silver)]",
      "dark:[&_.pagination-button]:shadow-none"
    ]
  end
  <% end %>
  <% end %>
  <%= if is_nil(@variant) or "inverted" in @variant do %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("inverted", "natural") do
    [
      "[&_.pagination-button]:border-natural-light [&_.pagination-button]:text-natural-light",
      "[&_.pagination-button]:hover:border-natural-hover-light [&_.pagination-button]:hover:text-natural-hover-light",
      "dark:[&_.pagination-button]:border-natural-dark dark:[&_.pagination-button]:text-natural-dark",
      "dark:[&_.pagination-button]:hover:border-natural-hover-dark dark:[&_.pagination-button]:hover:text-natural-hover-dark",
      "[&_.pagination-button.active-pagination-button]:border-natural-hover-light [&_.pagination-button.active-pagination-button]:text-natural-hover-light",
      "dark:[&_.pagination-button.active-pagination-button]:border-natural-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-natural-hover-dark",
      "[&_.pagination-button]:hover:bg-natural-bg-light dark:[&_.pagination-button]:hover:bg-natural-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-natural-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-natural-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("inverted", "primary") do
    [
      "[&_.pagination-button]:border-primary-light [&_.pagination-button]:text-primary-light",
      "[&_.pagination-button]:hover:border-primary-hover-light [&_.pagination-button]:hover:text-primary-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-primary-hover-light [&_.pagination-button.active-pagination-button]:text-primary-hover-light",
      "dark:[&_.pagination-button]:border-primary-dark dark:[&_.pagination-button]:text-primary-dark",
      "dark:[&_.pagination-button]:hover:border-primary-hover-dark dark:[&_.pagination-button]:hover:text-primary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-primary-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-primary-hover-dark",
      "[&_.pagination-button]:hover:bg-primary-bordered-bg-light dark:[&_.pagination-button]:hover:bg-primary-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-primary-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-primary-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("inverted", "secondary") do
    [
      "[&_.pagination-button]:border-secondary-light [&_.pagination-button]:text-secondary-light",
      "[&_.pagination-button]:hover:border-secondary-hover-light [&_.pagination-button]:hover:text-secondary-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-secondary-hover-light [&_.pagination-button.active-pagination-button]:text-secondary-hover-light",
      "dark:[&_.pagination-button]:border-secondary-dark dark:[&_.pagination-button]:text-secondary-dark",
      "dark:[&_.pagination-button]:hover:border-secondary-hover-dark dark:[&_.pagination-button]:hover:text-secondary-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-secondary-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-secondary-hover-dark",
      "[&_.pagination-button]:hover:bg-secondary-bordered-bg-light dark:[&_.pagination-button]:hover:bg-secondary-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-secondary-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-secondary-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("inverted", "success") do
    [
      "[&_.pagination-button]:border-success-light [&_.pagination-button]:text-success-light",
      "[&_.pagination-button]:hover:border-success-hover-light [&_.pagination-button]:hover:text-success-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-success-hover-light [&_.pagination-button.active-pagination-button]:text-success-hover-light",
      "dark:[&_.pagination-button]:border-success-dark dark:[&_.pagination-button]:text-success-dark",
      "dark:[&_.pagination-button]:hover:border-success-hover-dark dark:[&_.pagination-button]:hover:text-success-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-success-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-success-hover-dark",
      "[&_.pagination-button]:hover:bg-success-bordered-bg-light dark:[&_.pagination-button]:hover:bg-success-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-success-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-success-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("inverted", "warning") do
    [
      "[&_.pagination-button]:border-warning-light [&_.pagination-button]:text-warning-light",
      "[&_.pagination-button]:hover:border-warning-hover-light [&_.pagination-button]:hover:text-warning-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-warning-hover-light [&_.pagination-button.active-pagination-button]:text-warning-hover-light",
      "dark:[&_.pagination-button]:border-warning-dark dark:[&_.pagination-button]:text-warning-dark",
      "dark:[&_.pagination-button]:hover:border-warning-hover-dark dark:[&_.pagination-button]:hover:text-warning-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-warning-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-warning-hover-dark",
      "[&_.pagination-button]:hover:bg-warning-bordered-bg-light dark:[&_.pagination-button]:hover:bg-warning-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-warning-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-warning-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("inverted", "danger") do
    [
      "[&_.pagination-button]:border-danger-light [&_.pagination-button]:text-danger-light",
      "[&_.pagination-button]:hover:border-danger-hover-light [&_.pagination-button]:hover:text-danger-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-danger-hover-light [&_.pagination-button.active-pagination-button]:text-danger-hover-light",
      "dark:[&_.pagination-button]:border-danger-dark dark:[&_.pagination-button]:text-danger-dark",
      "dark:[&_.pagination-button]:hover:border-danger-hover-dark dark:[&_.pagination-button]:hover:text-danger-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-danger-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-danger-hover-dark",
      "[&_.pagination-button]:hover:bg-danger-bordered-bg-light dark:[&_.pagination-button]:hover:bg-danger-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-danger-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-danger-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("inverted", "info") do
    [
      "[&_.pagination-button]:border-info-light [&_.pagination-button]:text-info-light",
      "[&_.pagination-button]:hover:border-info-hover-light [&_.pagination-button]:hover:text-info-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-info-hover-light [&_.pagination-button.active-pagination-button]:text-info-hover-light",
      "dark:[&_.pagination-button]:border-info-dark dark:[&_.pagination-button]:text-info-dark",
      "dark:[&_.pagination-button]:hover:border-info-hover-dark dark:[&_.pagination-button]:hover:text-info-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-info-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-info-hover-dark",
      "[&_.pagination-button]:hover:bg-info-bordered-bg-light dark:[&_.pagination-button]:hover:bg-info-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-info-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-info-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("inverted", "misc") do
    [
      "[&_.pagination-button]:border-misc-light [&_.pagination-button]:text-misc-light",
      "[&_.pagination-button]:hover:border-misc-hover-light [&_.pagination-button]:hover:text-misc-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-misc-hover-light [&_.pagination-button.active-pagination-button]:text-misc-hover-light",
      "dark:[&_.pagination-button]:border-misc-dark dark:[&_.pagination-button]:text-misc-dark",
      "dark:[&_.pagination-button]:hover:border-misc-hover-dark dark:[&_.pagination-button]:hover:text-misc-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-misc-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-misc-hover-dark",
      "[&_.pagination-button]:hover:bg-misc-bordered-bg-light dark:[&_.pagination-button]:hover:bg-misc-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-misc-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-misc-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("inverted", "dawn") do
    [
      "[&_.pagination-button]:border-dawn-light [&_.pagination-button]:text-dawn-light",
      "[&_.pagination-button]:hover:border-dawn-hover-light [&_.pagination-button]:hover:text-dawn-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-dawn-hover-light [&_.pagination-button.active-pagination-button]:text-dawn-hover-light",
      "dark:[&_.pagination-button]:border-dawn-dark dark:[&_.pagination-button]:text-dawn-dark",
      "dark:[&_.pagination-button]:hover:border-dawn-hover-dark dark:[&_.pagination-button]:hover:text-dawn-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-dawn-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-dawn-hover-dark",
      "[&_.pagination-button]:hover:bg-dawn-bordered-bg-light dark:[&_.pagination-button]:hover:bg-dawn-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-dawn-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-dawn-bordered-bg-dark"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("inverted", "silver") do
    [
      "[&_.pagination-button]:border-silver-light [&_.pagination-button]:text-silver-light",
      "[&_.pagination-button]:hover:border-silver-hover-light [&_.pagination-button]:hover:text-silver-hover-light",
      "[&_.pagination-button.active-pagination-button]:border-silver-hover-light [&_.pagination-button.active-pagination-button]:text-silver-hover-light",
      "dark:[&_.pagination-button]:border-silver-dark dark:[&_.pagination-button]:text-silver-dark",
      "dark:[&_.pagination-button]:hover:border-silver-hover-dark dark:[&_.pagination-button]:hover:text-silver-hover-dark",
      "dark:[&_.pagination-button.active-pagination-button]:border-silver-hover-dark dark:[&_.pagination-button.active-pagination-button]:text-silver-hover-dark",
      "[&_.pagination-button]:hover:bg-silver-bordered-bg-light dark:[&_.pagination-button]:hover:bg-silver-bordered-bg-dark",
      "[&_.pagination-button.active-pagination-button]:bg-silver-bordered-bg-light dark:[&_.pagination-button.active-pagination-button]:bg-silver-bordered-bg-dark"
    ]
  end
  <% end %>
  <% end %>
  <%= if is_nil(@variant) or "gradient" in @variant do %>
  <%= if is_nil(@color) or "natural" in @color do %>
  defp color_variant("gradient", "natural") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-natural-from-light)] [&_.pagination-button]:to-[var(--gradient-natural-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-natural-from-dark)] dark:[&_.pagination-button]:to-white dark:[&_.pagination-button]:text-black",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "primary" in @color do %>
  defp color_variant("gradient", "primary") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-primary-from-light)] [&_.pagination-button]:to-[var(--gradient-primary-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-primary-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-primary-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "secondary" in @color do %>
  defp color_variant("gradient", "secondary") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-secondary-from-light)] [&_.pagination-button]:to-[var(--gradient-secondary-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-secondary-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-secondary-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "success" in @color do %>
  defp color_variant("gradient", "success") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-success-from-light)] [&_.pagination-button]:to-[var(--gradient-success-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-success-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-success-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "warning" in @color do %>
  defp color_variant("gradient", "warning") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-warning-from-light)] [&_.pagination-button]:to-[var(--gradient-warning-to-light)] [&_.pagination-button]:text-black",
      "dark:[&_.pagination-button]:from-[var(--gradient-warning-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-warning-to-dark)] dark:[&_.pagination-button]:text-black",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "danger" in @color do %>
  defp color_variant("gradient", "danger") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-danger-from-light)] [&_.pagination-button]:to-[var(--gradient-danger-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-danger-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-danger-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "info" in @color do %>
  defp color_variant("gradient", "info") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-info-from-light)] [&_.pagination-button]:to-[var(--gradient-info-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-info-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-info-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "misc" in @color do %>
  defp color_variant("gradient", "misc") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-misc-from-light)] [&_.pagination-button]:to-[var(--gradient-misc-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-misc-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-misc-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "dawn" in @color do %>
  defp color_variant("gradient", "dawn") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-dawn-from-light)] [&_.pagination-button]:to-[var(--gradient-dawn-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-dawn-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-dawn-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>

  <%= if is_nil(@color) or "silver" in @color do %>
  defp color_variant("gradient", "silver") do
    [
      "[&_.pagination-button]:bg-gradient-to-br [&_.pagination-button]:hover:bg-gradient-to-bl",
      "[&_.pagination-button]:from-[var(--gradient-silver-from-light)] [&_.pagination-button]:to-[var(--gradient-silver-to-light)] [&_.pagination-button]:text-white",
      "dark:[&_.pagination-button]:from-[var(--gradient-silver-from-dark)] dark:[&_.pagination-button]:to-[var(--gradient-silver-to-dark)] dark:[&_.pagination-button]:text-white",
      "[&_.pagination-button.active-pagination-button]:bg-gradient-to-bl"
    ]
  end
  <% end %>
  <% end %>
  defp color_variant(params, _) when is_binary(params), do: params

  defp default_classes() do
    [
      "w-fit flex [&.grouped-pagination>*]::flex-1 [&:not(.grouped-pagination)]:justify-start [&:not(.grouped-pagination)]:items-center [&:not(.grouped-pagination)]:flex-wrap  [&_.pagination-button.active-pagination-button]:font-medium [&.grouped-pagination]:overflow-hidden"
    ]
  end

  defp show_pagination?(nil, _total), do: true
  defp show_pagination?(true, total) when total <= 1, do: false
  defp show_pagination?(_, total) when total > 1, do: true
  defp show_pagination?(_, _), do: false
end