.list-pagination {
   &__body {
      color: black;

      display: flex;
      align-items: center;
      gap: 8px;
   }

   &__arrow {
      background-color: black;
      border-radius: 4px;

      display: flex;
      align-items: center;
      justify-content: center;

      width: 32px;
      height: 32px;

      cursor: pointer;

      &:hover {
         background-color: cl("accent");
      }

      &.active {
         background-color: cl("accent");
      }
   }

   &__pages {
      display: flex;
      align-items: center;
      gap: 8px;
   }

   &__page {
      border-radius: 4px;
      border: 1px solid rgba($color: #000000, $alpha: 0.2);
      color: inherit;

      width: 32px;
      height: 32px;

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;

      font-weight: 400;
      font-size: 12px;
      line-height: 130%;

      &.active {
         background: cl("accent");
         color: white;
         border-color: cl("accent");
      }

      &.empty {
         border-color: transparent;
      }

      &:hover {
         background: cl("accent");
         color: white;
         border-color: cl("accent");
      }
   }
}
