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__Icon()
	+RV-Element()
		background-color secondary-color

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

RV-Button--small__Icon(size)
	+RV-Element()
		.RV-Image
			height 'calc(%s * 1.8)' % size

RV-Button--small(size)
	+RV-Block--modifier()
		--size spacing-small
		
		RV-Button--small__Icon(size)


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

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

RV-Button--link__Icon(size)
	+RV-Element()
		padding-right 'calc(%s / 4)' % size
		padding-left calc(var(--size) / 4)

RV-Button--link(size)
	+RV-Block--modifier()
		border none
		border-radius 0px
		color primary-color
		&, *
			background-color transparent
			margin 0
			
		RV-Button--link__Icon(size)

_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__Icon--outwardsArrow(size)
		RV-Button__Icon--inwardsArrow(size)
		
		RV-Button__Icon--forwardSlope(size)
		RV-Button__Icon--backwardSlope(size)


RV-Button__Text(size)
	+RV-Element()
		font-size 'calc(%s * 1.65)' % size
		background-color secondary-color
		padding size

RV-Button()
	+RV-Block()
		RV-CSSParameter({
			size: spacing-medium
		})
		
		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-Reset()
		
		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)

RV-Button()