@import mixins
@import keyframes

+keyframes-vex-flyin
+keyframes-vex-flyout
+keyframes-vex-pulse

$blue: #3288e6
$green: #93BF0D // RJC
$reno-green: #3eb998 // RJC

.vex.vex-theme-default
	padding-top: 160px
	padding-bottom: 160px

	&.vex-closing .vex-content
		+vex-animation(vex-flyout .25s)

	.vex-content
		+vex-animation(vex-flyin .25s)

	.vex-content
		+border-radius(5px)
		// font-family: "Helvetica Neue", sans-serif
		background: #f0f0f0
		color: #444
		padding: 1em
		position: relative
		margin: 0 auto
		max-width: 100%
		width: 450px
		font-size: 1.1em
		line-height: 1.5em

		h1, h2, h3, h4, h5, h6, p, ul, li
			color: inherit

	.vex-close
		+border-radius(5px)
		position: absolute
		top: 0
		right: 0
		cursor: pointer

		&:before
			+border-radius(3px)
			position: absolute
			content: "\00D7"
			font-size: 26px
			font-weight: normal
			line-height: 31px
			height: 30px
			width: 30px
			text-align: center
			top: 3px
			right: 3px
			color: #bbb
			background: transparent

		&:hover:before, &:active:before
			color: #777
			background: #e0e0e0

	.vex-dialog-form

		.vex-dialog-message
			margin-bottom: .5em

		.vex-dialog-input
			margin-bottom: 1em

			textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
				+border-radius(3px)
				background: #fff
				width: 100%
				padding: .25em .67em
				border: 0
				font-family: inherit
				font-weight: inherit
				font-size: inherit
				min-height: 2.5em
				margin: 0 0 .25em

				&:focus
					+box-shadow(inset 0 0 0 2px lighten($green, 20%)) // RJC
					outline: none

		.vex-dialog-buttons
			+pie-clearfix()

	.vex-dialog-button
		+border-radius(3px)
		border: 0
		float: right
		margin: 0 0 0 .5em
		font-family: inherit
		// text-transform: uppercase
		// letter-spacing: .1em
		font-size: .8em
		line-height: 1em
		padding: .75em 2em

		&.vex-last
			margin-left: 0

		&:focus
			+vex-animation(vex-pulse 1.1s infinite)
			outline: none

			// vex-pulse uses -webkit-filter which
			// doesn't play so nice in mobile webkit
			@media (max-width: 568px)
				+vex-animation(none)

		&.vex-dialog-button-primary
			background: $green // RJC
			font-weight: bold
			color: #fff

		&.vex-dialog-button-secondary
			background: #e0e0e0
			color: #777

.vex-loading-spinner.vex-theme-default
	+box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3))
	+border-radius(100%)
	background: #f0f0f0
	border: .2em solid transparent
	border-top-color: #bbb
	top: -1.1em
	bottom: auto
	
.AdminThemeReno
	.vex.vex-theme-default
		.vex-dialog-form
			.vex-dialog-input
				textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
					&:focus
						+box-shadow(inset 0 0 0 2px lighten($reno-green, 20%)) // RJC
		
		.vex-dialog-button
			&.vex-dialog-button-primary
				background: $reno-green // RJC