'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const PaginationControl = styled__default['default'].nav `
  display: flex;
  align-items: center;
  gap: ${index.getSpacing('s02')};
  justify-content: ${({ alignment }) => {
    if (alignment === 'center') {
        return 'center';
    }
    else if (alignment === 'left') {
        return 'flex-start';
    }
    else if (alignment === 'right') {
        return 'flex-end';
    }
}};
`;
const PaginationButton = styled__default['default'].button `
  --pagination-button-bg-color: transparent;
  --pagination-button-font-color: ${index.getColorAlias('contentInteractiveSecondary')};
  ${index.getDefaultTransition()}
  ${index.getFontSize('size14')}
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  min-width: ${index.getSpacing('s06')};
  min-height: ${index.getSpacing('s06')};
  width: ${index.getSpacing('s06')};
  height: ${index.getSpacing('s06')};
  outline-offset: 2px;
  background-color: var(--pagination-button-bg-color);
  color: var(--pagination-button-font-color);

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

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

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

    ${({ theme }) => {
    return theme.mode === 'light'
        ? styled.css `
            &:hover {
              --pagination-button-bg-color: ${index.getLightenColor('hover01', 'contentInteractiveSecondary')};
            }
            &:active {
              --pagination-button-bg-color: ${index.getLightenColor('active01', 'contentInteractiveSecondary')};
            }
          `
        : styled.css `
            &:hover {
              --pagination-button-bg-color: ${index.getDarkenColor('hover01', 'contentInteractiveSecondary')};
            }
            &:active {
              --pagination-button-bg-color: ${index.getDarkenColor('active01', 'contentInteractiveSecondary')};
            }
          `;
}}
  }
`;
const Ellipsis = styled__default['default'].span `
  ${index.getFontSize('size12')}
  color: ${index.getColorAlias('contentDefault')};
`;
const PaginationText = styled__default['default'].span `
  ${index.getFontSize('size16')}
  color: ${index.getColorAlias('contentInteractiveSecondary')};
`;

exports.Ellipsis = Ellipsis;
exports.PaginationButton = PaginationButton;
exports.PaginationControl = PaginationControl;
exports.PaginationText = PaginationText;
