@charset 'UTF-8';
@import 'mixins';

html,
body {
	height: 100%;
}

body {
	background: #FF6F72;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 80px;
	font-family: 'Roboto', sans-serif;
	overflow: hidden;
}

.wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.stepper {
	&.vertical {
		position: relative;
		text-align: center;
		width: 300px;
		height: 300px;

		.arrow {
			width: 70px;
			opacity: .5;
			transition: all .2s ease-in-out;
			cursor: pointer;
			position: relative;
			user-select: none;

			&:hover {
				opacity: 1;
			}

			&.top {
				transform: rotate(90deg);
				top: 25px;
			}

			&.bottom {
				transform: rotate(-90deg);
				margin-top: 16px;
				top: -20px;
			}
		}

		.box {
			overflow: hidden;
			height: 92px;
			position: relative;
			padding: 10px 0;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 20px;
				background: linear-gradient(to bottom, rgba(255, 111, 114, 1) 0%, rgba(125, 185, 232, 0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6f72', endColorstr='#007db9e8',GradientType=0 );
				z-index: 1;
				user-select: none;
				pointer-events: none;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 20px;
				background: linear-gradient(to bottom, rgba(255, 111, 114, 1) 0%, rgba(125, 185, 232, 0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6f72', endColorstr='#007db9e8',GradientType=0 );
				z-index: 1;
				transform: rotate(180deg);
				user-select: none;
				pointer-events: none;
			}

			span {
				display: inline-block;
				letter-spacing: 1px;
			}

			.numbers1 {
				position: absolute;
				top: 12px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;

				span {
					transform: translateY(0);
				}
			}

			.numbers2 {
				position: absolute;
				top: 12px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				
				span {
					transform: translateY(90px);
				}
			}
		}
	}

	&.horizontal {
		position: relative;
		text-align: center;
		width: 300px;
		height: 119px;

		.arrow {
			width: 70px;
			opacity: .5;
			transition: all .2s ease-in-out;
			cursor: pointer;
			position: absolute;
			user-select: none;

			&:hover {
				opacity: 1;
			}

			&.top {
				transform: translateY(-50%);
				top: 59px;
				left: -11px;
			}

			&.bottom {
				transform: rotate(180deg) translateY(-50%);
				top: -12px;
				right: -11px;
			}
		}

		.box {
			overflow: hidden;
			height: 92px;
			position: relative;
			padding: 10px 0;
			margin: 0 50px;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 20px;
				background: linear-gradient(to right, rgba(255,111,114,1) 0%,rgba(125,185,232,0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6f72', endColorstr='#007db9e8',GradientType=1 );
				z-index: 1;
				user-select: none;
				pointer-events: none;
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				width: 20px;
				background: linear-gradient(to right, rgba(255,111,114,1) 0%,rgba(125,185,232,0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6f72', endColorstr='#007db9e8',GradientType=1 );
				z-index: 1;
				transform: rotate(180deg);
				user-select: none;
				pointer-events: none;
			}

			span {
				display: inline-block;
				letter-spacing: 1px;
			}

			.numbers1 {
				position: absolute;
				top: 12px;
				left: 31px;
				display: flex;
				

				span {
					transform: translateX(0);
				}
			}

			.numbers2 {
				position: absolute;
				top: 12px;
				left: 31px;
				display: flex;
				
				span {
					transform: translateX(185px);
				}
			}
		}
	}
}