:host {
  display: block;
  width: fit-content;
  color: var(--tenant-primary);
}

.paginator__button {
  width: 2rem;
  height: 2rem;
  color: inherit;
  font-size: 1rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;

  &:hover:not(:disabled) {
    background-color: color-mix(in srgb, white 84%, var(--tenant-primary));
    transform: translateY(-1px);
  }

  &:focus-visible {
    outline: 2px solid color-mix(in srgb, white 55%, var(--tenant-primary));
    outline-offset: 2px;
  }

  &:disabled {
    color: color-mix(in srgb, white 45%, var(--tenant-primary));
    cursor: default;
  }
}

.paginator__status {
  min-width: 3rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
