RV-Button--pill()
	+RV-Block__Modifier--name('pill')
		border-radius calc(var(--size) + var(--line-height) * 16px)
		padding-left calc(1.5 * var(--size))
		padding-right calc(1.5 * var(--size))

RV-Button--border(color)
	+RV-Block__Modifier--name('border')
		border 3px solid color
		color color
		border-radius 0px
		
		&, *
			background-color transparent
			
		+RV-Element('Icon')
			background-color secondary-color

RV-Button--small()
	+RV-Block__Modifier--name('small')
		--size spacing-small
		
		+RV-Element('Icon')
			.RV-Image
				height calc(var(--size) * 1.8)

RV-Button--medium()
	+RV-Block__Modifier--name('medium')
		--size spacing-medium * .6

RV-Button--large()
	+RV-Block__Modifier--name('large')
		--size spacing-large * .5

RV-Button--link()
	+RV-Block__Modifier--name('link')
		border none
		border-radius 0px
		color primary-color
		&, *
			background-color transparent
			margin 0
			
		+RV-Element('Icon')
			padding-right calc(var(--size) / 4)
			padding-left calc(var(--size) / 4)

_RV-Button__Icon--shape()
	margin-right calc(var(--size) * 1.2)
	&, *
		z-index 10
		position relative
		
	&:after, &:before
		content ''
		width 50%
		height 110%
		z-index 5
		background-color inherit
		position absolute


RV-Button__Icon--inwardsArrow()
	+RV-Element__Modifier--name('inwardsArrow')
		_RV-Button__Icon--shape()
		
		.RV-Image
			left calc(var(--size) * .5)
		&:after
			transform rotate(-35deg)
			left 70%
			top 25%
			
		&:before
			transform rotate(35deg)
			left 70%
			top -35%
			
RV-Button__Icon--outwardsArrow()
	+RV-Element__Modifier--name('outwardsArrow')
		_RV-Button__Icon--shape()
		margin-right calc(var(--size) * 2)
		
		.RV-Image
			left calc(var(--size) * .7)
		
		&:after
			transform rotate(35deg)
			left 70%
			top 25%
			
		&:before
			transform rotate(-35deg)
			left 70%
			top -37%

RV-Button__Icon--forwardSlope()
	_RV-Button__Icon--shape()
	+RV-Element__Modifier--name('forwardSlope')
		margin-right calc(var(--size) * 2)
		
		.RV-Image
			left calc(var(--size) * .7)

		&:after
			transform rotate(-15deg)
			top 0%
			
RV-Button__Icon--backwardSlope()
	_RV-Button__Icon--shape()
	+RV-Element__Modifier--name('backwardSlope')
		margin-right calc(var(--size) * 2)
		
		.RV-Image
			left calc(var(--size) * .7)
	
		&:after
			transform rotate(15deg)
			top -10%

RV-Button__Icon()
	+RV-Element--name('Icon')
		width min-content
		background-color primary-color
		padding var(--size)
		
		.RV-Image
			height calc(var(--size) * 2.5)


RV-Button__Text()
	+RV-Element--name('Text')
		font-size calc(var(--size) * 1.65)
		background-color secondary-color
		padding var(--size)

RV-Button()
	background-color #f00
	line-height 1
	overflow hidden
	font-family sans-serif
	background-color secondary-color
	color accent-color
	text-decoration none
	
	RV-Alignment--verticalCenter()
	display inline-flex
	border-radius 6px
	
+RV-Block('RV-Button')
	RV-CSSParameter({
		size: spacing-medium
	})
	RV-Reset()
	RV-Button(height)
	
	+RV-Element()
		RV-Button__Icon()
		
		+RV-Element__Modifier()
			RV-Button__Icon--outwardsArrow()
		
		+RV-Element__Modifier()
			RV-Button__Icon--inwardsArrow()
			
		+RV-Element__Modifier()
			RV-Button__Icon--forwardSlope()
			
		+RV-Element__Modifier()
			RV-Button__Icon--backwardSlope()	
		
	+RV-Element()
		RV-Button__Text()
	
	+RV-Block__Modifier()
		RV-Button--pill()
		
	+RV-Block__Modifier()
		RV-Button--link()
		
	+RV-Block__Modifier()
		RV-Button--small()
		
	+RV-Block__Modifier()
		RV-Button--medium()
		
	+RV-Block__Modifier()
		RV-Button--large()
		
	+RV-Block__Modifier()
		RV-Button--border(primary-color)