@st-namespace 'Pagination-st-css';
@st-import [ --wix-color-5, --wix-color-8, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createFont, createColor, createFontWithOverrides ] from '../../common/formatters.st.js';
@st-import [ srOnly ] from '../internal/WixUiCoreComponents/common/a11y.st.css';
@st-import [ --wst-paragraph-2-color-rgb, --wst-links-and-actions-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The font of the pagination pages
 * @type font
 * @default [Desktop] preset: 'Body-M' | overrides: { size: '16px'} [Mobile] preset: 'Body-M' | overrides: { size: '14px'}
  */
@property st-global(--wix-ui-tpa-pagination-text-font);

/*
 * The color of the pagination pages
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-pagination-text-font-color);

/*
 * The opacity of the pagination pages
 * @type opacity
 * @default 1
 */
@property st-global(--wix-ui-tpa-pagination-text-font-opacity);

/*
 * The opacity of the hovered text font
 * @type opacity
 * @default 0.7
 */
@property st-global(--wix-ui-tpa-pagination-hovered-text-font-opacity);

/*
 * The color of the selected page
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-pagination-selected-text-font-color);

/*
 * The opacity of the selected page
 * @type opacity
 * @default 1
 */
@property st-global(--wix-ui-tpa-pagination-selected-text-font-opacity);

/*
 * The color of the disabled nav buttons
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-pagination-disabled-text-font-color);

/*
 * The size of the nav button svg
 * @type size
 * @default 24px
 */
@property st-global(--wix-ui-tpa-pagination-nav-button-svg-size);

/*
 * The opacity of the nav button svg
 * @type opacity
 * @default 1
 */
@property st-global(--wix-ui-tpa-pagination-nav-button-svg-opacity);

/*
 * The opacity of the hovered nav button svg
 * @type opacity
 * @default 0.7
 */
@property st-global(--wix-ui-tpa-pagination-hovered-nav-button-svg-opacity);

.button-common-mixin {
  display: inline-flex;
  flex-shrink: 0;
}

.root {
  -st-states: rtl, mobile, disabled, error;
  user-select: none;

  align-items: stretch;
  box-sizing: border-box;
  display: inline-flex;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px" }'),
  createFont((--wix-ui-tpa-pagination-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  text-decoration-color: createColor(--wix-ui-tpa-pagination-selected-text-font-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

.root:mobile {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "14px" }'),
  createFont((--wix-ui-tpa-pagination-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.buttonTransition {
  transition: 200ms opacity;
}

.pageButtonRules {
  -st-mixin: buttonTransition;
  min-width: 1em;
  min-height: 1em;
  line-height: 1em;
  justify-content: center;
  align-items: center;
  padding: 0.5em 0.5em;
  margin: 0.25em;
}

.root::pageButton {
  -st-mixin: pageButtonRules;
  position: relative;
  color: createColor(--wix-ui-tpa-pagination-text-font-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  opacity: var(--wix-ui-tpa-pagination-text-font-opacity, 1);
}

.root::currentPage {
  -st-mixin: pageButtonRules;
  color: createColor(--wix-ui-tpa-pagination-selected-text-font-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  opacity: var(--wix-ui-tpa-pagination-selected-text-font-opacity, 1);
  text-decoration: underline;
  padding: 0.5em;
}

.root:not(:disabled)::pageButton:hover::before {
  opacity: 0.2;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.root:not(:disabled)::pageButton:hover {
  opacity: var(--wix-ui-tpa-pagination-hovered-text-font-opacity, 0.7);
  text-decoration: underline;
}

.root:disabled::pageButton {
  cursor: default;
}

.root::navButton {
  -st-mixin: buttonTransition;
  min-width: 1em;
  min-height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: createColor(--wix-ui-tpa-pagination-text-font-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  opacity: var(--wix-ui-tpa-pagination-nav-button-svg-opacity, 1);
}

button.pageButton,
button.navButton {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

button.pageButton {
  width: 2em;
  height: 2em;

}

.root::navButton:disabled,
.root[data-preview="disabled"]::navButton {
  cursor: default;
  color: createColor(--wix-ui-tpa-pagination-disabled-text-font-color, var(--wix-color-29));
}

.root::navButton:hover:not(:disabled) {
  opacity: var(--wix-ui-tpa-pagination-hovered-nav-button-svg-opacity, 0.7);
}

.root::navButton svg {
  width: 1em;
  min-width: var(--wix-ui-tpa-pagination-nav-button-svg-size, 24px);
  height: 1em;
  min-height: var(--wix-ui-tpa-pagination-nav-button-svg-size, 24px);
}

.root:rtl::navButton svg {
  transform: scaleX(-1);
}

.root::navButtonFirst,
.root::navButtonPrevious {
  margin-right: 1em;
}

.root:rtl::navButtonFirst,
.root:rtl::navButtonPrevious {
  margin-right: 0;
  margin-left: 1em;
}

.root::navButtonLast,
.root::navButtonNext {
  margin-left: 1em;
}

.root:rtl::navButtonLast,
.root:rtl::navButtonNext {
  margin-left: 0;
  margin-right: 1em;
}

.root::gap {
  -st-mixin: pageButtonRules;
  color: createColor(--wix-ui-tpa-pagination-text-font-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  opacity: var(--wix-ui-tpa-pagination-text-font-opacity, 1);
}

.root::pageStrip {
  min-width: 3em;
  overflow: visible;
  align-self: center;
}

.root::pageStripInner {
  flex-grow: 1;
  flex-basis: auto;
  justify-content: center;
  overflow: visible;
  align-items: center;
}

.root::pageStripTemplate {
  overflow: hidden;
}

.root::pageForm {
  flex-grow: 1;
  flex-basis: auto;
  justify-content: center;
  align-items: stretch;
}

.root::compact {
  color: createColor(--wix-ui-tpa-pagination-text-font-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  opacity: var(--wix-ui-tpa-pagination-text-font-opacity, 1);
}

.root:mobile::compact {
  align-items: center;
}

.root::compact svg {
  width: 1em;
  height: 1em;
}

.root::totalPages {
  max-width: 4ch;
  min-width: 1ch;
  padding-left: 0.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  color: createColor(--wix-ui-tpa-pagination-text-font-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  opacity: var(--wix-ui-tpa-pagination-text-font-opacity, 1);
  align-self: center;
}


.sr-only {
  -st-mixin: srOnly;
}

.navButton {
  -st-mixin: button-common-mixin;
  -st-states: disabled;
}

.navButton:not(:disabled) {
  cursor: pointer;
}

.emptyButton {
  -st-mixin: button-common-mixin;
}

.navButtonFirst {  order: 1;  }
.navButtonPrevious,
.emptyButtonPrevious{  order: 2;  }
.navButtonNext,
.emptyButtonNext{  order: 4;  }
.navButtonLast {  order: 5;  }

.pageStrip {
  order: 3;
  overflow-x: hidden;
}

.pageStripInner {
  display: flex;
}

.pageStripTemplate {
  height: 0;
  overflow: hidden;
}

.pageButton {
  -st-mixin: button-common-mixin;
  -st-states: disabled;
}

.pageButton:not(:disabled) {
  text-decoration: none;
  cursor: pointer;
}

.currentPage {
  -st-mixin: button-common-mixin;
}

.gap {
  -st-mixin: button-common-mixin;
}

.pageForm {
  display: flex;
  order: 3;
}

.compact {
  -st-extends: pageForm;
}

.pageInput {}
.totalPages {}
.slash {}

/* st-namespace-reference="../../../../src/components/Pagination/Pagination.st.css" */