@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(pagination) {
  display: flex;
  align-items: center;
  font-size: getCssVar("font-size", "medium");
  gap: 8px;
  @include e(total) {
    color: getCssVar("font-size", "text-1");
    white-space: nowrap;
  }
  @include e(list) {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  @include e(navigator) {
    &:hover {
      background-color: getCssVar("color", "fill-2") !important;
      color: getCssVar("color", "text-1") !important;
    }
    &:active {
      background-color: getCssVar("color", "fill-3") !important;
    }
  }
  @include e(item) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: getCssVar("font-size", "text-1");
    background-color: transparent;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    user-select: none;
    &:hover {
      background-color: getCssVar("color", "primary-1");
      color: getCssVar("color", "primary-6");
    }
    @include when(active) {
      background-color: getCssVar("color", "primary-1");
      color: getCssVar("color", "primary-6");
    }
  }
  @include e(jumper) {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  @include e(jumper-text) {
    color: getCssVar("font-size", "text-1");
    white-space: nowrap;
  }
  @each $size in $size-list {
    @include m($size) {
      @include be(pagination, total) {
        font-size: getCssVar("font-size", $size);
        height: getCssVar("size", $size);
        line-height: getCssVar("size", $size);
      }
      @include be(pagination, item) {
        font-size: getCssVar("font-size", $size);
        height: getCssVar("size", $size);
        line-height: getCssVar("size", $size);
        width: getCssVar("size", $size);
        border-radius: getCssVar("radius", $size);
      }
    }
  }
}