@charset "UTF-8";

@import
	"fonts",
	"normalize",
	"fontello",
	"animations",
	"foundation/settings",
	"foundation/components/reveal",
	"foundation/components/grid",
	"foundation/components/buttons",
	"foundation/components/forms",
	"foundation/components/alert-boxes",
	"foundation/components/tables",
	"common-main";

$setup-heading-nub-size: 15px;

#version-label {
	text-align: center;
	color: #666;
	font-size: rem-calc(13);
	margin-bottom: 50px;

  a {
    color: $alert-color;
  }
}

#setup-view {
	.step {
		background-color: white;
		margin: 50px 0 10px 0;
		@include radius($global-radius);
		overflow: hidden;
		max-width: 460px;

		h1 {
			position: relative;
			background-color: $alert-color;
			color: white;
			margin: 0;
			padding: 20px 10px;
			font-size: rem-calc(30);
			text-align: center;
			line-height: 1.2em;

			.light {
				font-family: $body-font-family;
			}

			.nub {
				display: block;
				position: absolute;
				width: 0;
				height: 0;
				border: $setup-heading-nub-size solid $alert-color;

				border-bottom-style: solid;
				border-color: $alert-color !important;
				border-bottom-color: transparent !important;
				border-left-color: transparent !important;
				border-right-color: transparent !important;
				bottom: -($setup-heading-nub-size*2);
				left: 50%;
				margin-left: -$setup-heading-nub-size;
			}
		}

		h3 {
			font-size: rem-calc(30);
			line-height: 1.3em;
		}

		.content {
			padding: 40px 20px 20px 20px;
			border: 1px solid #ccc;
			border-top: none;
			@include side-radius(bottom, $global-radius);

			h2 {
				font-size: rem-calc(20);
				text-align: center;

				img {
					vertical-align: middle;
				}
			}

			p {
				text-align: left;
				font-size: rem-calc(16);
				line-height: 1.3em;
			}

			a {
				color: $primary-color;

				&.button {
					color: white;

					small {
						font-size: rem-calc(22);
						font-family: $body-font-family;
					}
				}

				i.icon-right-open {
					font-size: rem-calc(22);
					vertical-align: middle;
				}
			}

			button, .button {
				font-size: rem-calc(28);
				padding: 10px 0;

			}

			.skip-step {
				i.icon-right-open {
					font-size: rem-calc(15);
				}
			}
		}

		.checking-state,
		.success-state,
		.settings-state,
		.failed-state {
			display: none;
		}

		&.checking {
			.checking-state {
				display: block;
			}
		}

		&.success {
			.success-state {
				display: block;
			}
		}

		&.settings {
			.settings-state {
				display: block;
			}
		}

		&.failed {
			.failed-state {
				display: block;
			}
		}

		.checking-state {
			i.animate-spin {
				margin-top: 20px;
				display: block;
				font-size: rem-calc(50);
			}
		}
	}

	label {
		text-align: left;
		font-size: rem-calc(22);
	}
}

#step-name {
	.preview {
		color: #ccc;
		font-size: rem-calc(18);
		text-align: left;
		padding-left: 10px;

		li {
			margin-bottom: 20px;
			list-style: none;
		}

		span.bold, i {
			color: $success-color;
		}
	}

	.failed-state {
		i.failed {
			font-size: rem-calc(50);
			color: $alert-color;
		}
	}
}

#step-internet {
	.success-state {
		h3 {
			margin: 10px auto;
		}

		p {
			text-align: center !important;
			font-size: rem-calc(22) !important;
		}

		hr {
			height: 1px;
			border: none;
			background: #ccc;
		}

		.hotspot-off {
			padding: 15px 0;

			label {
				font-size: rem-calc(18);
				line-height: 1.2em;

				small {
					font-size: rem-calc(14);
					color: #a5a5a5;
					text-transform: none;
				}
			}
		}
	}

	.failed-state {
		i.failed {
			font-size: rem-calc(50);
			color: $alert-color;
		}
	}

	.settings-state {
		.button, button {
			margin-bottom: 10px;

			&.loading {
				font-size: rem-calc(18);
				padding: 16px 0;
			}
		}

		p.small {
			font-size: rem-calc(14);
		}

		ul {
			padding: 0;
			width: 100%;

			li {
				text-align: left;
				list-style: none;
				cursor: pointer;
				padding: 20px 5px;
				border-top: 1px solid #ccc;

				.name {
					font-size: rem-calc(22);
					color: #ccc;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 70%;
					line-height: 1.2em;
				}

				&:hover, &.selected {
					background-color: $success-color;
					color: white;

					.name {
						color: white;
					}
				}

				.indicators {
					i {
						font-size: rem-calc(22);
					}
				}

				.signal {
					font-size: rem-calc(10);
					vertical-align: middle;
				}
			}
		}
	}
}

#step-printer-selection {
  img {
    height: 100px;
  }
  .printer-selected-message, #picker-container {
    display: none;
  }

  &.printer-selected {
    .printer-selected-message {
      display: inline-block;
    }
  }
  &.show-printer-selection {
    a.change-printer, .printer-selected-message {
      display: none;
    }
    #picker-container {
      display: inline-block;
    }
  }
  &.checking {
    .container-printer-selection {
      display: none;
    }
  }
}

#step-astroprint {
	form {
		margin-top: 35px;
	}

	.success-state {
		i.ok {
			font-size: rem-calc(30) !important;
			color: $success-color;
			vertical-align: middle;
		}
	}
}

#step-printer {
	label {
		p {
			text-transform: none;
			font-family: $body-font-family;
			margin: 0 0 15px 0;
		}
	}
}

#step-done {
	a.button.setup-done {
		margin-top: 20px;
	}
}

@import
	"noty",
  "turnoff",
	"widgets";
