:host {
  display: block;
}

.hb-pagination {
  display: flex;
  align-items: center;
  gap: var(--hb-spacing-xxs);
  font-size: var(--hb-font-size-sm);
  color: var(--hb-color-text);
  user-select: none;
}

.hb-pagination--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.hb-pagination__total {
  margin-right: var(--hb-spacing-xs);
  color: var(--hb-color-text-secondary);
}

.hb-pagination__sizes {
  height: 28px;
  padding: 0 var(--hb-spacing-xs);
  border: 1px solid var(--hb-color-border);
  border-radius: var(--hb-border-radius-sm);
  background: var(--hb-color-bg);
  color: var(--hb-color-text);
  font-size: var(--hb-font-size-sm);
  cursor: pointer;
  outline: none;
  margin-right: var(--hb-spacing-xs);
}

.hb-pagination__sizes:focus {
  border-color: var(--hb-color-primary);
}

.hb-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--hb-color-border);
  border-radius: var(--hb-border-radius-sm);
  background: var(--hb-color-bg);
  color: var(--hb-color-text);
  font-size: var(--hb-font-size-sm);
  cursor: pointer;
  outline: none;
  transition: all var(--hb-transition-duration) var(--hb-transition-function);
}

.hb-pagination__btn:hover:not(:disabled):not(.hb-pagination__btn--active) {
  color: var(--hb-color-primary);
  border-color: var(--hb-color-primary);
}

.hb-pagination__btn:disabled {
  color: var(--hb-color-text-disabled);
  cursor: not-allowed;
  background: var(--hb-color-fill-quaternary);
}

.hb-pagination__btn--active {
  background-color: var(--hb-color-primary);
  border-color: var(--hb-color-primary);
  color: #fff;
}

.hb-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  color: var(--hb-color-text-secondary);
  letter-spacing: 2px;
}
