scss-library/components/05_Molecules/pagination/_pagination.styl

RV-Pagination__Item(breakPoint)
	+RV-Element()
		RV-BreakPoint__Item(breakPoint)

+RV-Block('RV-Pagination')
	RV-CSSParameter({
		color: #f4a460,
		size: 3rem,
		navigationBreakPoint: 200px
		breakPoint: 450px
	})
	
	display grid
	grid-template-columns minmax(30px, 1fr) minmax(15rem, 4fr) minmax(30px,1fr)

	+RV-Element('Backwards')
		RV-BreakPoint(--navigationBreakPoint)
		RV-FlexRow__Item()
		+RV-Squash()
			RV-BreakPoint--horizontal()
			RV-FlexRow__Item--narrower()
		flex-basis 100px

	+RV-Element('Forwards')
		RV-BreakPoint(--navigationBreakPoint)
		RV-FlexRow__Item()
		+RV-Squash()
			RV-BreakPoint--horizontal()
			RV-FlexRow__Item--narrower()
		flex-basis 100px

	+RV-Element('Sites')
		RV-BreakPoint(--breakPoint)
		RV-FlexRow__Item()
		+RV-Squash()
			RV-BreakPoint--horizontal()
			RV-FlexRow__Item--wider()
		justify-content center
		gap .7rem
		

	+RV-Element('Label')
		RV-Pagination__Item(--navigationBreakPoint)
		+RV-Squash()
			RV-BreakPoint__Item--outside()
		border-radius .2rem
		--color transparent
			
	+RV-Element('Icon')
		RV-Pagination__Item(--navigationBreakPoint)
		+RV-Squash()
			RV-FlexRow__Item--narrower()
		--color transparent
		display flex
		justify-content center
		
	+RV-Element('Number')
		RV-Pagination__Item(--breakPoint)
		border-radius .2rem
		display flex
		justify-content center
		.RV-Link
			RV-BreakPoint__Item(--size)
			RV-BreakPoint__Item--outside()
			text-align center

		&:nth-last-child(-n + 2),
		&:nth-child(-n + 2)
			+RV-Squash()
				RV-BreakPoint__Item--outside()
					
	+RV-Squash()
		RV-BreakPoint--horizontal()
	
	.RV-Link
		RV-Alignment()
		+RV-Squash()
			RV-Alignment--verticalCenter()
		height 100%
		background-color --color
		
	+RV-Element('First')
		text-align center

	+RV-Element('Previous')
		text-align center

	+RV-Element('Next')
		text-align center
	
	+RV-Element('Last')
		text-align center
	
	min-width 450px
	align-items stretch
	height --size
	gap .5rem;