scss-library/components/04_Atoms/button/_button.styl

RV-Button--pill(size)
	+RV-Block--modifier()
		border-radius 'calc(%s + var(--line-height) * 16px)' % size
		padding-left 'calc(1.5 * %s)' %s
		padding-right 'calc(1.5 * %s)' %s

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

RV-Button--small(size)
	+RV-Block--modifier()
		--size spacing-small
		
		+RV-Element('Icon')
			.RV-Image
				height 'calc(%s * 1.8)' % size

RV-Button--medium()
	+RV-Block--modifier()
		--size spacing-medium * .6

RV-Button--large()
	+RV-Block--modifier()
		--size spacing-large * .5

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

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


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

RV-Button__Icon--forwardSlope(size)
	+RV-Element--modifier()
		_RV-Button__Icon--shape(size)
		margin-right 'calc(%s * 2)' % size
		
		.RV-Image
			left 'calc(%s * .7)' % size

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

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


RV-Button__Text(size)
	+RV-Element()
		font-size 'calc(%s * 1.65)' % size
		background-color secondary-color
		padding 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()
	
	+RV-Element()
		RV-Button__Icon--outwardsArrow(--size)
		RV-Button__Icon--inwardsArrow(--size)
		
		RV-Button__Icon--forwardSlope(--size)
		RV-Button__Icon--backwardSlope(--size)
		
		RV-Button__Icon(--size)
		
	RV-Button__Text(--size)
	
	RV-Button--pill(--size)
	RV-Button--link(--size)
	RV-Button--small(--size)
	RV-Button--medium(--size)
	RV-Button--large(--size)
	RV-Button--border(primary-color)