import * as React from 'react';
import { styled } from 'styleh-components';
import { Button, PaginationPreset, ArrowIcon } from '@skava/packages/ui';
const wording = {
    prev: 'PrevPage',
    next: 'NextPage',
};
const PrevNextButton = styled(Button) `
  cursor: pointer;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: var(--color-black);

  .button-text {
    display: none;
  }

  svg.svg-icon {
    height: 1.5rem;
    path {
      stroke: var(--color-black);
    }
  }
  a {
    color: inherit;
  }
`;
const PrevPage = (props) => {
    return (React.createElement(PrevNextButton, Object.assign({ icon: React.createElement(ArrowIcon, { leftCircle: true }), text: wording.prev, qa: "qa-pagination-previous" }, props)));
};
const NextPage = (props) => {
    return (React.createElement(Button, Object.assign({ icon: React.createElement(ArrowIcon, { rightCircle: true }), text: wording.next, qa: "qa-pagination-next" }, props)));
};
export const StyledList = styled.div.attrs({
    'className': 'list',
    'data-qa': 'qa-page-number-container',
}) ``;
const { Pagination, PageCountText, PaginationDropDown, CountSection, StyledPrimaryCount, } = PaginationPreset;
const StyledPagination = styled(Pagination).attrs({
    className: 'pagination-header pagination-wrapper',
}) `
  .select-dropdown-wrap {
    z-index: 2;
    height: 2.75rem;
  }
  ${CountSection} {
    font: $font-medium-small;
  }
  ${PageCountText} {
    font-size: 1rem;
    font-weight: 500;
  }
  ${StyledPrimaryCount} {
    -moz-appearance: textfield;
    @font (16, medium);
    padding: var(--spacing-extra-small) 0;
    width: 2rem;
  }
  .select-dropdown-wrap {
    height: 1.75rem;
    margin-top: 0.5rem;
  }
  .dropdown-parent {
    display: flex;
    margin-top: 0.25rem;
    width: rem(56);
    span {
      font-size: 1rem;
    }
  }
  .select-dropdown-list {
    ${PaginationDropDown} {
      width: 100%;
      padding: 0;
      justify-content: center;
      background: var(--color-light-grey);

      &:hover {
        background: var(--color-blue);
      }
    }
  }
`;
const PaginationNav = styled.nav.attrs({
    'data-qa': 'qa-pagination-container',
}) `
  grid-column: 1 / 4;
  margin: 0 var(--spacing-medium);
  display: flex;
  padding: var(--spacing-medium) 0px;
  text-align: center;
  align-items: center;

  .list {
    display: flex;
    margin: 0;
    max-width: 80vw;
    overflow: scroll;
  }

  .page-number {
    font-size: 1.125rem;
    color: var(--color-black);
    padding-right: var(--spacing-medium);
    cursor: pointer;

    &:hover {
      text-decoration: $underline;
    }
    &.active {
      color: var(--color-blue);
      font-weight: bold;
      text-decoration: $underline;
    }
    &:last-child {
      padding-right: 0;
    }
  }
`;
const PageNumberElement = styled.span.attrs({
    className: 'pagination-page-number',
}) ``;
export { PrevPage, NextPage, PaginationNav, PageNumberElement, StyledPagination };
//# sourceMappingURL=styled.js.map