/* pagination-controls.component.scss */

:host {
  display: block;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border-radius: 6px;
  user-select: none;
}

.page-btn {
  background: var(--color-secondary-btn-background);
  color: var(--color-text-primary);
  border: none;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background‐color 0.2s, color 0.2s;

  &:hover:not(:disabled) {
    background: var(--color-secondary-btn-background-hover);
    color: var(--color-text-primary-hover);
  }

  &:disabled {
    opacity: 0.4;
    cursor: default;
  }

  &.active {
    background: var(--accent-color);
    color: var(--color-sidenav-background);
    pointer-events: none;

    &:hover {
      background: var(--accent-color-hover);
    }
    &:active {
      background: var(--accent-color-active);
    }
  }
}

.page-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;

  li.ellipsis .dots {
    color: var(--color-text-secondary);
    padding: 0.4rem 0.75rem;
  }
}
