import e, { css as r } from "styled-components";
import { getSpacing as n, getColorAlias as t, getDefaultTransition as g, getFontSize as i, getModifiedColorByThemeMode as a, getLightenColor as c, getDarkenColor as l } from "../../utils/index.js";
const p = e.nav`
  display: flex;
  align-items: center;
  gap: ${n("s02")};
  justify-content: ${({ alignment: o }) => {
  if (o === "center")
    return "center";
  if (o === "left")
    return "flex-start";
  if (o === "right")
    return "flex-end";
}};
`, v = e.button`
  --pagination-button-bg-color: transparent;
  --pagination-button-font-color: ${t(
  "contentInteractiveSecondary"
)};
  ${g()}
  ${i("size14")}
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  min-width: ${n("s06")};
  min-height: ${n("s06")};
  width: ${n("s06")};
  height: ${n("s06")};
  outline-offset: 2px;
  background-color: var(--pagination-button-bg-color);
  color: var(--pagination-button-font-color);

  &:hover {
    --pagination-button-bg-color: ${a(
  "hover01",
  "interactiveSecondary"
)};
  }
  &:active {
    --pagination-button-bg-color: ${a(
  "active01",
  "interactiveSecondary"
)};
  }

  &:focus {
    outline: 2px solid ${t("focusOuter")};
  }

  &[data-active=\"true\"] {
    --pagination-button-bg-color: ${t(
  "contentInteractiveSecondary"
)};
    --pagination-button-font-color: ${t(
  "contentInteractivePrimary"
)};

    ${({ theme: o }) => o.mode === "light" ? r`
            &:hover {
              --pagination-button-bg-color: ${c(
  "hover01",
  "contentInteractiveSecondary"
)};
            }
            &:active {
              --pagination-button-bg-color: ${c(
  "active01",
  "contentInteractiveSecondary"
)};
            }
          ` : r`
            &:hover {
              --pagination-button-bg-color: ${l(
  "hover01",
  "contentInteractiveSecondary"
)};
            }
            &:active {
              --pagination-button-bg-color: ${l(
  "active01",
  "contentInteractiveSecondary"
)};
            }
          `}
  }
`, b = e.span`
  ${i("size12")}
  color: ${t("contentDefault")};
`, d = e.span`
  ${i("size16")}
  color: ${t("contentInteractiveSecondary")};
`;
export {
  b as Ellipsis,
  v as PaginationButton,
  p as PaginationControl,
  d as PaginationText
};
