@layer components {
	.yst-root {
		.yst-pagination {
			@apply
			yst-isolate
			yst-inline-flex
			yst--space-x-px
			yst-rounded-md
			yst-shadow-sm;
		}

		.yst-pagination-display__text {
			@apply
			yst-py-2
			yst-px-3
			yst-font-normal
			yst-text-slate-500
			yst-ring-1
			yst-ring-inset
			yst-ring-slate-200;
		}

		.yst-pagination-display__current-text {
			@apply
			yst-font-semibold
			yst-text-slate-600;
		}

		.yst-pagination-display__truncated {
			@apply
			yst-inline-flex
			yst-self-center
			yst-py-2
			yst-px-4
			yst-text-sm
			yst-font-semibold
			yst-text-slate-500
			yst-ring-1
			yst-ring-inset
			yst-ring-slate-200;
		}

		.yst-pagination__button {
			@apply
			yst-relative
			yst-inline-flex
			yst-items-center
			yst-px-2
			yst-py-2
			yst-text-slate-400
			yst-ring-1
			yst-ring-inset
			yst-ring-slate-300
			hover:yst-bg-slate-50
			focus:yst-z-20
			focus:yst-outline-offset-0
			focus:yst-outline-primary-500;
		}

		/* States */

		.yst-pagination__button--active {
			@apply
			yst-z-10
			yst-bg-primary-500
			yst-text-sm
			yst-font-semibold
			yst-text-white
			yst-ring-0
			hover:yst-bg-primary-500
			focus:yst-z-20
			focus-visible:yst-outline
			focus-visible:yst-outline-2
			focus-visible:yst-outline-offset-2
			focus-visible:yst-outline-primary-500
			focus-visible:yst-rounded-sm;
		}

		.yst-pagination__button--disabled {
			@apply
			yst-opacity-50
			yst-cursor-not-allowed
			hover:yst-bg-transparent
			focus:yst-outline-none;
		}
	}
}
