$wp-spinner-bg: #808080
$wp-spinner-fg: #ffffff
$wp-spinner-size: 18px
$wp-spinner-size-inner: 4px
$wp-spinner-anim-duration: 1.08s

$blue: #428BFF
$red: #FF4A53
$green: #4BB543
$dark: #333

$accent: $blue
$accent-inactive: desaturate($accent, 85%)
$secondary: $accent-inactive

/* tab setting */
$tab-count: 3
$indicator-width: 50px
$indicator-height: 4px

/* selectors relative to radio inputs */
$label-selector: "~ ul > li"
$slider-selector: "~ .slider"
$content-selector: "~ .content > section"

@keyframes infinite-spinning
	from
		transform: rotate(0deg)
	to
		transform: rotate(360deg)


$shade-10: #2c3e50 !default
$shade-1: #d7dcdf !default
$shade-0: #fff !default
$teal: #1abc9c !default

// Range Slider
$range-width: 100% !default

$range-handle-color: $shade-10 !default
$range-handle-color-hover: $teal !default
$range-handle-size: 20px !default

$range-track-color: $shade-1 !default
$range-track-height: 10px !default

$range-label-color: $shade-10 !default
$range-label-width: 60px !default


.toplevel_page_wpspx, .wpspx_page_wpspx-cache, .wpspx_page_wpspx-shows, .wpspx_page_wpspx-support, .wpspx_page_wpspx-license, .wpspx_page_wpspx-basket, .wpspx_page_wpspx-login

	#wpcontent
		padding-left: 0

		.wpspx-wrapper
			justify-content: center
			display: flex
			flex-flow: wrap

			header
				text-align: center
				background: white
				padding: 40px
				flex: 0 0 100%
				box-sizing: border-box

				nav
					display: flex
					flex-flow: wrap
					justify-content: center

					ul
						display: flex
						flex-flow: wrap
						margin: 20px 0 0 0

						li
							margin: 0 10px

							a
								color: $accent-inactive
								text-decoration: none
								font-size: 18px
								font-weight: 600
								position: relative
								transition: all 0.3s ease-in-out

								&:after
									content: ''
									position: absolute
									bottom: -7px
									background: transparent
									height: 3px
									width: 100%
									left: 0
									pointer-events: none
									transition: all 0.3s ease-in-out


								&.active
									color: $dark

									&:after
										background: $dark




							&:hover

								a
									color: $dark

									&:after
										background: $dark







			.done
				transition: all 0.3s ease-in-out
				position: absolute
				top: 0
				left: 50%
				transform: translate(-50%, -100vh)
				width: 50%
				z-index: 99
				padding: 3rem
				min-height: 550px
				background: white
				transition: all 0.3s
				display: flex
				flex-flow: wrap

				&.show
					transform: translate(-50%, 0)
					box-shadow: 0px 28px 77px 14px #666

				#stopwatch
					position: absolute
					left: 0
					bottom: 17px
					width: 100%
					text-align: center
					font-family: monospace
					font-size: 13px
					color: #666
					text-transform: uppercase


				ul
					margin: 0
					width: 100%

					li
						width: 100%
						margin-bottom: 5px
						padding: 5px
						display: flex
						flex: 0 0 100%
						align-items: center
						justify-content: space-between
						position: relative

						&::before
							content: ""
							position: absolute
							height: 100%
							top: 0
							left: 0
							width: 0%
							transition: all 0.3s linear
							z-index: -1
							background: #E1F5C4

						&.complete

							&::before
								width: 100%

							.loadinggif
								opacity: 0

							.donetick
								opacity: 1

						&:first-of-type
							font-size: 23px
							font-weight: 600
							margin-bottom: 2rem

							&::before
								display: none

						span
							font-weight: 600
							text-transform: uppercase

						.loadinggif
							width: 21px
							height: auto
							opacity: 1
							transition: all 0.3s linear
							position: absolute
							right: 5px

						.donetick
							width: 21px
							height: auto
							opacity: 0
							transition: all 0.3s linear
							transition-delay: 0.5s

				a
					margin-top: auto


			article
				padding: 60px
				max-width: 800px
				min-width: 800px
				width: 800px
				display: flex
				flex-flow: wrap
				justify-content: center
				box-sizing: border-box

				.notice
					margin: 0 0 20px 0
					width: 100%
					border-top: 0
					border-bottom: 0
					border-right: 0


				.form-table

					td
						input:not(.wp-picker-clear), input:not(.checkbox)
							width: 100%
							margin-bottom: 10px

						input[type=checkbox]
							width: auto
							margin: 0

						span
							color: #666
							font-size: 12px

							&.error
								font-weight: 600
								color: $red

							&.active
								font-weight: 600
								color: $green




				.tab
					display: flex
					flex-flow: wrap
					flex: 0 0 100%
					padding: 40px
					background: white
					box-sizing: border-box
					position: relative

					div
						flex: 0 0 100%

						section
							flex-flow: wrap
							display: flex
							flex-flow: wrap
							flex: 0 0 100%
							justify-content: left
							text-align: left
							align-items: center


						h2
							font-size: 25px
							margin: 20px 0 30px 0
							flex: 0 0 100%


						p
							flex: 0 0 25%
							margin: 0 0 15px 0
							flex: 0 0 100%

						dl
							flex: 0 0 100%
							display: flex
							flex-flow: wrap
							align-items: center
							align-content: center

							dt
								flex: 0 0 40%
								line-height: 2.2
								margin-bottom: 0

								&:first-of-type
									font-weight: 600
									border-bottom: 1px solid #ccc


							dd
								flex: 0 0 60%
								margin-left: 0
								margin-bottom: 0
								line-height: 2.2

								&:first-of-type
									font-weight: 600
									border-bottom: 1px solid #ccc

						svg
							width: 16px
							height: auto


						.header
							flex-flow: wrap
							display: flex
							justify-content: space-between

							.half
								flex: 0 0 100%
								display: flex
								flex-flow: wrap
								margin-bottom: 10px

								p
									font-weight: 600
									flex: 0 0 50%
									margin-bottom: 0

								span
									flex: 0 0 50%
									font-weight: 600

						.debug_log
							height: 280px
							overflow: scroll
							margin-bottom: 30px
							border: 1px solid #eee
							border-radius: 4px
							background: #f9f9f9
							padding: 20px
							box-sizing: border-box

							dl
								margin: 0
								display: flex
								flex-flow: wrap
								margin: 0 0 30px
								align-items: flex-start
								align-content: flex-start

								dt
									margin: 0
									font-weight: 600
									border-bottom: 0

								dd
									margin: 0
									font-weight: normal
									border-bottom: 0

									ul
										margin: 0
										li
											margin: 0

						.pages
							display: flex
							flex-flow: wrap

							.found
								display: flex
								align-content: center
								align-items: center

								p
									flex: 0 0 35%
									margin-bottom: 0


.wpspx_page_wpspx-shows

	.content
		position: relative

	.submit
		margin-bottom: 0 !important
		padding-bottom: 0



	.loading
		display: flex
		align-items: center
		position: absolute
		bottom: 5px
		left: 155px
		opacity: 0
		transition: all 0.3s ease-in-out

		&.show
			opacity: 1


		.spin
			display: block
			float: none

			position: relative
			width: $wp-spinner-size
			height: $wp-spinner-size
			border-radius: $wp-spinner-size
			background: $wp-spinner-bg
			animation: infinite-spinning $wp-spinner-anim-duration linear infinite

			&:after
				content: ""
				position: absolute
				top: 2px
				left: 50%
				width: $wp-spinner-size-inner
				height: $wp-spinner-size-inner
				border-radius: $wp-spinner-size-inner
				margin-left: -($wp-spinner-size-inner / 2)
				background: $wp-spinner-fg


#wpspx_cache_section
	// background: $accent-inactive
	// color: white

	.accordion-section-title:after, .handlediv, .item-edit, .postbox .handlediv.button-link, .toggle-indicator
		// color: white


	.hndle
		// color: white


	.update-messages h2, .update-php h2, h4
		margin-bottom: 2rem


	ul
		margin: -20px 0 0 0

		li
			font-weight: 600
			margin: 0
			align-items: center
			display: flex

			svg
				margin-right: 10px
				width: 14px
				height: auto


#adminmenu
	.toplevel_page_wpspx
		.wp-menu-image
			img
				width: auto
				height: 18px
				padding: 8px 0px