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

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

RV-Pagination__Backwards(breakPoint)
	+RV-Element()
		RV-BreakPoint(breakPoint)
		RV-FlexRow__Item()
		RV-BreakPoint--horizontal()
		RV-FlexRow__Item--narrower()
		flex-basis 100px
		margin-right -.1rem
		
RV-Pagination__Forwards(breakPoint)
	+RV-Element()
		RV-BreakPoint(breakPoint)
		RV-FlexRow__Item()
		RV-BreakPoint--horizontal()
		RV-FlexRow__Item--narrower()
		flex-basis 100px
		margin-left -.1rem

RV-Pagination__Sites(breakPoint)
	+RV-Element()
		RV-BreakPoint(breakPoint)
		RV-FlexRow__Item()
		RV-BreakPoint--horizontal()
		RV-FlexRow__Item--wider()
		justify-content center
		gap .7rem
		
RV-Pagination__Label(breakPoint)
	+RV-Element()
		RV-Pagination__Item(breakPoint)
		RV-BreakPoint__Item--outside()
		border-radius .2rem
		--color transparent
	
RV-Pagination__Icon(breakPoint)
	+RV-Element()
		RV-Pagination__Item(breakPoint)
		RV-FlexRow__Item--narrower()
		--color transparent
		display flex
		justify-content center
		
RV-Pagination__Number(breakPoint, size)
	+RV-Element()
		RV-Pagination__Item(breakPoint)
		border-radius .2rem
		display flex
		justify-content center
		//margin 0 -.5rem
		.RV-Link
			RV-BreakPoint__Item(size)
			RV-BreakPoint__Item--outside()
			text-align center

		&:nth-last-child(-n + 2),
		&:nth-child(-n + 2)
			RV-BreakPoint__Item--outside()

RV-Pagination()
	+RV-Block()
		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-Pagination__Backwards(--navigationBreakPoint)
		RV-Pagination__Forwards(--navigationBreakPoint)
		RV-Pagination__Label(--navigationBreakPoint)
		RV-Pagination__Icon(--navigationBreakPoint)

		RV-Pagination__Sites(450px)
		RV-Pagination__Number(450px, --size)
						
		RV-BreakPoint--horizontal()
		
		.RV-Link
			RV-Alignment()
			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;
		
RV-Pagination()