ul.content
	li#content-item-01.content__item
		div.content__item__text
			| item1
	li#content-item-02.content__item
		div.content__item__text
			| item2
	li#content-item-03.content__item
		div.content__item__text
			| item3

@import 'nib'

cWidth = 30px
sWidth = 200px

createGradient(type, str)
	dev = 20
	spl = 100 / dev
	for i in (0..dev)
		if i % 2 == 1
			if i
				str = str + ',#888 ' + ((i - 1) * spl) + '.01%'
			str = str + ',#888 ' + (i * spl) + '%'
		else
			if i
				str = str + ',#000 ' + ((i - 1) * spl) + '.01%'
			str = str + ',#000 ' + (i * spl) + '%'
	if type == 'linear'
		str = 'linear-gradient(' + str + ')'
	else
		str = 'radial-gradient(' + str + ')'
	background-image unquote(str)

body
	display flex
	flex-flow row nowrap
	align-items center
	justify-content stretch
	min-height 100vh

.content
	width 100%
	min-height 100vh
	background-color #ff0
	display flex
	flex-flow row nowrap
	align-items stretch
	justify-content stretch
	
	&__item
		display inline-block
		background-color #0ff
		width 33%
		flex-grow 1
		flex-shrink 1
		display flex
		flex-flow column nowrap
		justify-content center
		align-items center
		position relative
		overflow hidden
		transition all .2s ease 0s
		z-index 10

		&__text
			size 80px
			background-color #fff
			display flex
			flex-flow column nowrap
			justify-content center
			align-items center
			border-radius 50%
			position relative
			z-index 4
			font-size 14px
			transition all .2s ease 0s

		&:hover
			width 50%
			flex-glow 2

			& ^[1]__text
				size 120px
				font-size 18px

		&::before
		&::after
			content ''
			absolute left 50% top 50%
			size 100vmax
			margin-top -50vmax
			margin-left -50vmax
			animation-duration 20s
			animation-timing-function linear
			animation-delay 0s
			animation-iteration-count infinite
			animation-direction	normal
			
		&::before
			mix-blend-mode overlay
			animation-name cont_anim1
			z-index 1

		&::after
			mix-blend-mode overlay
			animation-name cont_anim2
			z-index 2
		
		color-high = #aaa
		color-low = #888

		&:nth-child(1)
			background-image linear-gradient(
				bottom left,
				#ff8 0%,
				#f88 100%
			)
			
			&::before
				background-image repeating-linear-gradient(
					-45deg,
					color-high 0px, color-high 10px,
					color-low 10px, color-low 20px
				)

			&::after
				background-image repeating-linear-gradient(
					45deg,
					color-high 0px, color-high 10px,
					color-low 10px, color-low 20px
				)

		&:nth-child(2)
			background-image linear-gradient(
				bottom left,
				#f8f 0%,
				#88f 100%
			)
			
			&::before
				background-image repeating-radial-gradient(
					-45deg,
					color-high 0%, color-high 2%,
					color-low 2%, color-low 4%
				)
				animation-name cont_anim3

			&::after
				background-image repeating-linear-gradient(
					45deg,
					color-high 0px, color-high 10px,
					color-low 10px, color-low 20px
				)

		&:nth-child(3)
			background-image linear-gradient(
				bottom left,
				#8ff 0%,
				#8f8 100%
			)
			
			&::before,
			&::after
				background-image radial-gradient(
					color-low 40%,
					transparent 0
				), radial-gradient(
					color-low 40%,
					transparent 0
				)
				background-color color-high
				background-position 0 0, 10px 10px
				background-size 20px 20px

	@keyframes cont_anim1
		to
			transform rotate(0deg)
		from
			transform rotate(360deg)

	@keyframes cont_anim2
		to
			transform rotate(360deg)
		from
			transform rotate(0deg)

	@keyframes cont_anim3
		0%
			size 100vmax
			margin-top -50vmax
			margin-left -50vmax
		50%
			size 200vmax
			margin-top -100vmax
			margin-left -100vmax
		100%
			size 100vmax
			margin-top -50vmax
			margin-left -50vmax