/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
.joy-pagination {
  --pagination-focus-color: var(--joy-color-neutral-60);
  --pagination-separator-text-color: var(--joy-color-neutral-60);
  --pagination-cta-color: var(--joy-color-neutral-40);
  --pagination-bg-color-hover: var(--joy-color-secondary-10);
  --pagination-color-hover: var(--joy-color-secondary-50);
  --pagination-bg-color-active: var(--joy-color-secondary-30);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 20px 0;
  padding: 0;
  list-style-type: none;
}
.joy-pagination ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
}

::slotted(ul) {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
}

li {
  margin: 0 3px;
}
li a, li button, li .joy-pagination__icon {
  position: relative;
  cursor: pointer;
  user-select: none;
  color: var(--pagination-cta-color);
  background: none;
  border: 0 none;
  text-decoration: none;
  font-weight: var(--joy-font-weight-bold);
  font-size: var(--joy-font-size-primary-600);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
li a:hover, li button:hover, li .joy-pagination__icon:hover {
  background-color: var(--pagination-bg-color-hover);
  color: var(--pagination-color-hover);
}
li a:hover svg, li button:hover svg, li .joy-pagination__icon:hover svg {
  color: var(--pagination-color-hover);
}
li a:after, li button:after, li .joy-pagination__icon:after {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transition: box-shadow var(--joy-transition-duration-default);
  border-radius: 50%;
}
li a:focus-visible:after, li button:focus-visible:after, li .joy-pagination__icon:focus-visible:after {
  box-shadow: 0 0 0 2px var(--pagination-focus-color);
}
li a.current, li button.current, li .joy-pagination__icon.current {
  background-color: var(--pagination-bg-color-active);
  color: white;
  text-decoration: none;
}
li a:active, li button:active, li .joy-pagination__icon:active {
  background-color: var(--pagination-bg-color-active);
  color: white;
}
li a:active svg, li button:active svg, li .joy-pagination__icon:active svg {
  color: white;
}
li.joy-pagination__hidden {
  opacity: 0.2;
  pointer-events: none;
}
li.joy-pagination__hidden button, li.joy-pagination__hidden a {
  cursor: not-allowed;
}
li.joy-pagination__arrow {
  display: inline-flex;
  align-items: center;
}
li.joy-pagination__arrow a, li.joy-pagination__arrow button {
  display: inline-flex;
  align-items: center;
}
li .joy-pagination__separator-after {
  margin-right: 30px;
}
li .joy-pagination__separator-after::before {
  content: "...";
  position: absolute;
  color: var(--pagination-separator-text-color);
  white-space: nowrap;
  left: calc(100% + 10px);
}
li .joy-pagination__separator-before {
  margin-left: 30px;
  white-space: nowrap;
}
li .joy-pagination__separator-before::before {
  content: "...";
  position: absolute;
  color: var(--pagination-separator-text-color);
  white-space: nowrap;
  right: calc(100% + 10px);
}