$space: 1.5rem;
$grey: lighten(black, 25);
$blue: #5171C3;
$orange: #DE660F;
$green: #2EA83B;
$yellow: #BDB235;
$tan: #AA9E5C;
$purple: #3E5EB3;
$ease: all .5s cubic-bezier(0.23, 1, 0.32, 1);

@function longshadow($color_a,$color_b,$stepnum, $opacity: 1) {
	$gradient_steps: null;
	@for $i from 1 through $stepnum {
		$weight: ( ( $i - 1 ) / $stepnum ) * 100;
		$colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
		$seperator: null;
		@if($i != $stepnum){ 
			$seperator: #{','}; 
		}
		$gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
 }
  @return $gradient_steps;
}

* {
	box-sizing: border-box
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	line-height: 1.5;
	font-family: 'Montserrat';
	background: darken(white, 5);
	color: $grey;
	overflow: hidden;
}

.view {
	position: relative;
	height: 640px;
	width: 384px;
	background: darken(white, 1);
	box-shadow: 0 3px 6px rgba(black,0.16), 0 3px 6px rgba(black,0.23);
	overflow-y: scroll;
}

.card {
	
	&__list {
		padding: $space / 2;
	}
	
	&__item {
		margin: 0 0 $space / 2;
		padding: $space*1.5 $space;
		border-top: 4px solid $grey;
		box-shadow: 0 1px 3px rgba(black,.12), 0 1px 2px rgba(black,0.24);
		background: white;
		cursor: pointer;
		transition: $ease;
		
		&--blue {
			border-top-color: $blue;
			p.info-player__num { 
				background: $blue;
				text-shadow: longshadow(darken($blue, 15%),$blue,20, 0.7);
			}
			&:hover {
				.info-player__name,
				.info-place {
					color: $blue;
				}
			}
		}
		
		&--orange {
			border-top-color: $orange;
			p.info-player__num { 
				background: $orange;
				text-shadow: longshadow(darken($orange, 15%),$orange,20, 0.7);
			}
			&:hover {
				.info-player__name,
				.info-place {
					color: $orange;
				}
			}
		}
		
		&--green {
			border-top-color: $green;
			p.info-player__num { 
				background: $green;
				text-shadow: longshadow(darken($green, 15%),$green,20, 0.7);
			}
			&:hover {
				.info-player__name,
				.info-place {
					color: $green;
				}
			}
		}
		
		&--yellow {
			border-top-color: $yellow;
			p.info-player__num { 
				background: $yellow;
				text-shadow: longshadow(darken($yellow, 15%),$yellow,20, 0.7);
			}
			&:hover {
				.info-player__name,
				.info-place {
					color: $yellow;
				}
			}
		}
		
		&--tan {
			border-top-color: $tan;
			p.info-player__num { 
				background: $tan;
				text-shadow: longshadow(darken($tan, 15%),$tan,20, 0.7);
			}
			&:hover {
				.info-player__name,
				.info-place {
					color: $tan;
				}
			}
		}
		
		&--purple {
			border-top-color: $purple;
			p.info-player__num { 
				background: $purple;
				text-shadow: longshadow(darken($purple, 15%),$purple,20, 0.7);
			}
			&:hover {
				.info-player__name,
				.info-place {
					color: $purple;
				}
			}
		}
		
		&:hover {
			background: #444;
			
			.info-player__num {
				transform: scale(1.1);
			}
		}
	}
	
	&__info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.info-player {
			display: flex;
			align-items: center;
			
			&__num {
				width: 60px;
				height: 60px;
				line-height: 36px;
				padding: $space / 2;
				margin: 0 $space / 2 0 0;
				text-align: center;
				background: silver;
				border-radius: 50%;
				font-size: 36px;
				color: white;
				overflow: hidden;
				transition: $ease;
			}
			
			&__name {
				line-height: 1.1;
				font-size: 20px;
				margin: 0;
				
				small {
					font-size: 14px;
				}
			}
		}
		
		.info-place {
			margin: 0;
			font-size: 24px;
		}
	}
	
	&__full {
		will-change: transform;
		display: flex;
		flex-flow: column wrap;
		position: fixed;
		top: 50%;
		left: 50%;
		width: 384px;
		height: 640px;
		z-index: 2;
		visibility: hidden;
		transform-origin: top center;
		transform: scaleY(0) translate(-50%, -50%);
		transition: $ease;
		
		&.active {
			visibility: visible;
			transform: scaleY(1) translate(-50%, -50%);
			
			.card__full-num,
			.card__full-handle,
			.card__full-info {
				opacity: 1;
			}
		}
		
		&-top, 
		&-bottom {
			flex: 1;
		}
		
		&-bottom {
			display: flex;
			justify-content: center;
			flex-flow: column wrap;
			padding: 0 $space * 2;
			background: white;
		}
		
		&-top {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $blue;
			overflow: hidden;
			
			svg {
				position: absolute;
				top: $space;
				left: $space;
				fill: rgba(black, 0.4);
				width: 32px;
				cursor: pointer;
				transition: $ease;
				
				&:hover {
					fill: rgba(black, 0.7);
				}
			}
		}
		
		&-num,
		&-handle,
		&-info {
			opacity: 0;
			transition: $ease;
			transition-duration: 2s;
			transition-delay: .35s;
		}
		
		&-num {
			color: white;
			font-size: 140px;
		}
		
		&-handle {
			font-size: 16px;
			margin: 0;
		}
		
		&-info {
			margin: 0;
			font-size: 20px;
			color: $grey;
		}
	}
}

.logo {
  position: fixed;
  bottom: 3vh;
  right: 3vw;
  z-index: 2;
  
  
  img {
    width: 45px;
    transition: $ease;
    transform: rotate(0);
		filter: invert(100%);
		-webkit-filter: invert(100%);
  
    &:hover {
      transform: rotate(180deg) scale(1.1);
    }
  }
}