@import "./vars.pcss";

.pagination {
  display: var(--paginationDisplay);
  gap: var(--paginationGap);
  flex-flow: var(--paginationFlexFlow);
  align-items: var(--paginationAlignItems);
  user-select: var(--paginationUserSelect);
  @mixin resetList;

  li&__item {
    width: var(--paginationItemWidth);
    height: var(--paginationItemHeight);
    font-weight: var(--paginationItemFontWeight);
    font-size: var(--paginationItemFontSize);
    line-height: var(--paginationItemLineHeight);
    aspect-ratio: var(--paginationItemAspectRatio);

    @mixin nlc {
      margin-right: var(--paginationItemMr);
    }

    &--isExtra {
      --paginationItemWidth: auto;
      --paginationItemHeight: auto;
      --paginationItemAspectRatio: auto;
      padding-left: var(--paginationItemExtraPaddingLeft);
    }

    &.isActive,
    &--isActive {
      --paginationLinkCursor: var(--paginationItemActiveCursor);
      --paginationLinkBgColor: var(--paginationItemActiveBgColor);
      --paginationLinkColor: var(--paginationItemActiveColor);
      --paginationItemHoverColor: var(--paginationItemActiveHoverColor);
      --paginationItemHoverBgColor: var(--paginationItemActiveHoverBgColor);
    }
  }

  div&__link,
  label&__link,
  a&__link {
    cursor: var(--paginationLinkCursor);
    color: var(--paginationLinkColor);
    background: var(--paginationLinkBgColor);
    transition: var(--paginationLinkTransition);
    border-radius: var(--paginationLinkBorderRadius);
    position: var(--paginationLinkPosition);
    border: var(--paginationLinkBorder);
    width: var(--paginationLinkWidth);
    height: var(--paginationLinkHeight);
    display: var(--paginationLinkDisplay);
    align-items: center;
    justify-content: center;
    text-decoration: var(--paginationItemTextDecoration);

    .isHover,
    &--isHover,
    &:hover {
      @media (hover: hover) {
        --paginationLinkColor: var(--paginationItemHoverColor);
        --paginationLinkBgColor: var(--paginationItemHoverBgColor);}
    }
  }
}