welcome.sass

@import defs
@import font
@import login

body
	background-color: #FFF
	padding: 0
	font-size: 14px
	overflow-x: hidden
	overflow-y: auto

h1
	font-family: inherit
	font-size: 56px
	font-weight: 300
	margin: 0 0 16px 0
	padding: 16px 8px 24px 64px
	background-color: $base-color
	color: #FFF
	@media #{$small-and-down}
		padding: 16px 16px 24px 16px
		text-align: center
	position: relative

$sections: 4

#step
	position: absolute
	left: 0
	width: 100%
	bottom: 0
	background-color: lighten($base-color, 40%)
	height: 4px
	+transform-origin(0% 0%)
	+transition(transform 0.3s ease-out)
	@for $section from 0 to $sections
		*[data-view="#{$section}"] &
			+transform(scaleX(#{$section/$sections}))

main
	+transition(transform 0.5s)
	width: $sections*100%
	overflow: hidden
	@for $section from 0 to $sections
		*[data-view="#{$section}"] &
			+transform(translateX(#{-100%*$section/$sections}))

section
	padding: 0 8px 16px 8px
	display: none
	width: 100%/$sections
	vertical-align: top

figure
	width: 100%
	@media #{$medium-and-up}
		width: 50%
	@media #{$large-and-up}
		width: 25%
	margin: 0
	padding: 16px
	display: inline-block
	vertical-align: top

img
	max-height: 150px
	max-width: 100%
	margin: 0 auto
	display: block
	margin-bottom: 8px
.svg
	width: 100%
.expand
	max-height: none

p
	padding: 0 16px

h2
	font-size: 45px
	font-weight: 400
	padding: 0 8px
	margin: 0 0 8px 0

.next
	margin: 0 auto

	border: none
	border-radius: 2px
	display: table
	height: 36px*1.25
	line-height: 36px*1.25
	min-width: 88px*1.5
	outline: 0
	padding: 0 8px
	text-transform: uppercase
	vertical-align: middle
	font-size: 14px*1.5
	// Gets rid of tap active state
	-webkit-tap-highlight-color: transparent

	text-decoration: none
	color: #FFF !important
	background-color: $accent-color
	text-align: center
	letter-spacing: .5px
	+box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12))
	+transition(all 0.3s ease-out)
	cursor: pointer

	&:hover
		background-color: lighten($accent-color, 5%)
		color: #FFF
		+box-shadow(0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15))

#login
	position: static
	+transform(scale(1))
	margin: 0
	+box-shadow(none)
	padding: 0
	width: 100% !important
	&>input[type="submit"]
		@extend .next
		position: static
	&:not(.ready)>input[type="submit"]
		background-color: #DFDFDF !important
		+box-shadow(none)
		color: #9F9F9F !important
		cursor: default

		&:hover
			background-color: #DFDFDF
			color: #9F9F9F
	&:not(.ready)::after
		content: "In order to log you in, Check PCR is fetching the login page from PCR. Please wait for it to load."
		margin-top: 8px
		display: block
	&.done::after
		content: "You're already logged into PCR. Just click Next below to continue."
		margin-top: 8px
		display: block
	@media #{$medium-and-up}
		width: 600px !important
	&>.content
		max-height: none

[type="checkbox"] + label
	margin: 0 auto 32px auto !important
	display: table

.snackbar
	z-index: 5000
	position: fixed
	bottom: 0
	left: 0
	right: 0
	text-align: center
	+transform(translateY(100%))
	+transition(transform 0.3s ease)
	&.active
		+transform(translateY(0))

.snackInner
	height: 48px
	font-size: 14px
	line-height: 20px
	padding: 14px 24px
	background: #323232
	color: #FFF
	display: inline-block
	width: 100%
	@media #{$medium-and-up}
		width: auto
		min-width: 288px
		max-width: 568px
		border-radius: 2px 2px 0 0
	&>a
		text-transform: uppercase
		color: $accent-color
		float: right
		margin-left: 24px
		font-weight: 500
		@media #{$medium-and-up}
			margin-left: 48px

#progress
	height: 6px
	display: block
	width: 100%
	background-color: lighten($base-color, 40%)
	overflow: hidden
	position: fixed
	bottom: 0
	left: 0
	right: 0
	opacity: 0
	transform: scaleY(0)
	z-index: 1000
	+transition(opacity 0.3s 0.5s ease, transform 0.3s 0.5s ease)
	will-change: opacity, transform
	&.active
		transform: scaleY(1)
		opacity: 1
	&>.determinate
		position: absolute
		background-color: inherit
		top: 0
		left: 0
		bottom: 0
		background-color: $accent-color
		will-change: width
		+transition(width .3s linear)
	&>.indeterminate
		$scale: 1.5
		background-color: $accent-color
		&::before
			content: ''
			position: absolute
			background-color: inherit
			top: 0
			left: 0
			bottom: 0
			will-change: left, right
			// Custom bezier
			+animation(indeterminate 2.1s*$scale cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite reverse)
		&::after
			content: ''
			position: absolute
			background-color: inherit
			top: 0
			left: 0
			bottom: 0
			will-change: left, right
			// Custom bezier
			+animation(indeterminate-short 2.1s*$scale cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite reverse)
			+animation-delay(1.15s*$scale)

+keyframes(indeterminate)
	0%
		left: -35%
		right: 100%
	60%
		left: 100%
		right: -90%
	100%
		left: 100%
		right: -90%

+keyframes(indeterminate-short)
	0%
		left: -200%
		right: 100%
	60%
		left: 107%
		right: -8%
	100%
		left: 107%
		right: -8%

table
	border: none
	width: 100%

td
	width: 50%
	padding: 8px

#cursor
	position: absolute
	left: 48px
	top: 24px
	width: 24px
	z-index: 300

#athenaData
	word-break: break-all
	height: calc(90vh - 380px)
	min-height: 12em
	padding: 8px
	$border: 1px solid #F5F5F5
	border-right: $border
	border-left: $border
	border-top: $border
	+transition(none)

#athenaDataError
	color: #F44336
	&::before
		content: "Encountered an error when parsing: "

.assignment
	color: rgba(0,0,0,0.87)
	+border-radius(4px)
	padding: 16px 16px 8px+8px+8px+36px 16px
	+box-shadow(0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12))
	overflow: auto
	white-space: nowrap
	font-size: 15px
	font-weight: 500
	max-height: 26px
	z-index: 100
	position: relative
	max-height: 600px
	&>small, &>.linked
		margin-right: 5px
		font-size: inherit
		font-weight: 400
		color: rgba(0,0,0,0.54)
		overflow: hidden
		text-overflow: ellipsis
		max-width: 150px
		display: inline-block
		vertical-align: top
	&>.linked:hover
		color: #000
	&>.title
		font-weight: normal
		font-size: 24px
		top: 22px + 16px
		position: absolute
		left: 16px
		line-height: 24px
		color: rgba(0,0,0,0.87)
	&>.complete
		display: inline-block
		position: absolute
		z-index: 300
		+border-radius(2px)
		color: $accent-color
		left: 8px
		bottom: 8px
		width: auto
		height: 36px
		text-align: center
		line-height: 56px
		font-size: 28px
		color: $accent-color
		padding: 0 8px
		+transition(background-color 0.3s ease)
		&, &::after
			font-size: 16px
			line-height: 36px
			@media #{medium-screen-up}
				font-size: 15px
		&:hover
			background-color: rgba(0, 0, 0, 0.05)
		&::after
			content: 'Done'
			font-family: "Roboto", sans-serif
			margin-left: 4px
			text-transform: uppercase
			vertical-align: 2px
		&>.wave
			background-color: rgba(#00963E, 0.7)
	&.done>.complete
		color: rgba(255,255,255,0.3)
		background-color: #00642A
		transform: rotate(360deg)
		&:hover
			background-color: #007D34
			color: rgba(255,255,255,0.4)
	&>.range, &>.attachments
		display: block
		margin: 30px 0 0 0
		font-weight: 400
		font-size: 18px
		position: relative
		padding-left: 16px + 8px
		white-space: normal
		&::before
			@extend .material-icons
			color: rgba(0,0,0,0.54)
			position: absolute
			display: inline-block
			vertical-align: top
			top: 4px
			left: 0
		&, &::before
			font-size: 16px
			@media #{medium-screen-up}
				font-size: 15px

	&>.range
		margin-top: 24px + 8px
	&>.range::before
		content: 'schedule'
	&>.attachments::before
		content: 'attachment'
	&.attachment
		margin-top: 8px
	&>.attachments>a
		width: 144px
		height: 96px
		background-color: #F5F5F5
		will-change: background-color
		+transition(background-color 0.3s ease)
		margin-right: 8px
		display: inline-block
		position: relative
		text-decoration: none
		color: inherit
		padding: 10px
		font-size: 16px
		overflow: hidden
		white-space: nowrap
		text-overflow: ellipsis
		+border-radius(2px)
		&:hover
			background-color: #E0E0E0
		&::after
			content: ' '
			width: 0
			height: 0
			border-style: solid
			border-width: 0 0 20px 20px
			border-color: transparent transparent #FFFFFF transparent
			position: absolute
			right: 0
			bottom: 0
		&::before
			content: ' '
			width: 0
			height: 0
			border-style: solid
			border-width: 20px 20px 0 0
			border-color: transparent
			position: absolute
			right: 0
			bottom: 0
		&>span
			position: absolute
			bottom: 16px
			left: 16px
			font-size: 14px
			color: rgba(0,0,0,0.54)
			&::before
				@extend .material-icons
				margin-right: 4px
				font-size: 12px
				vertical-align: middle
		$types: (document: #2196F3 description, slides: #FFC107 crop_5_4, pdf: #F44336 insert_drive_file, plain: #009688 description)
		@each $type, $data in $types
			$color: nth($data, 1)
			$icon: nth($data, 2)
			&.#{$type}::before
				border-top-color: $color
			&.#{$type}>span::before
				content: ""+$icon
				color: $color
	&>.body
		white-space: normal
		padding: 16px
		font-weight: initial
		line-height: 1.5
		display: block
		font-size: 14px
		padding: 4px 0 0 0
		@media #{medium-and-up}
			font-size: 13px
		a
			max-width: 500px
			@media only screen and (max-width: 600px)
				max-width: calc(100vw - 60px)
			overflow: hidden
			display: inline-block
			white-space: nowrap
			text-overflow: ellipsis
			vertical-align: bottom