"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("styled-components"),t=require("../../utils/index.js");function i(e){return e&&e.__esModule?e:{default:e}}var o=i(n);const a=o.default.nav`
  display: flex;
  align-items: center;
  gap: ${t.getSpacing("s02")};
  justify-content: ${({alignment:e})=>{if(e==="center")return"center";if(e==="left")return"flex-start";if(e==="right")return"flex-end"}};
`,r=o.default.button`
  --pagination-button-bg-color: transparent;
  --pagination-button-font-color: ${t.getColorAlias("contentInteractiveSecondary")};
  ${t.getDefaultTransition()}
  ${t.getFontSize("size14")}
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  min-width: ${t.getSpacing("s06")};
  min-height: ${t.getSpacing("s06")};
  width: ${t.getSpacing("s06")};
  height: ${t.getSpacing("s06")};
  outline-offset: 2px;
  background-color: var(--pagination-button-bg-color);
  color: var(--pagination-button-font-color);

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

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

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

    ${({theme:e})=>e.mode==="light"?n.css`
            &:hover {
              --pagination-button-bg-color: ${t.getLightenColor("hover01","contentInteractiveSecondary")};
            }
            &:active {
              --pagination-button-bg-color: ${t.getLightenColor("active01","contentInteractiveSecondary")};
            }
          `:n.css`
            &:hover {
              --pagination-button-bg-color: ${t.getDarkenColor("hover01","contentInteractiveSecondary")};
            }
            &:active {
              --pagination-button-bg-color: ${t.getDarkenColor("active01","contentInteractiveSecondary")};
            }
          `}
  }
`,c=o.default.span`
  ${t.getFontSize("size12")}
  color: ${t.getColorAlias("contentDefault")};
`,l=o.default.span`
  ${t.getFontSize("size16")}
  color: ${t.getColorAlias("contentInteractiveSecondary")};
`;exports.Ellipsis=c;exports.PaginationButton=r;exports.PaginationControl=a;exports.PaginationText=l;
