@import "bourbon";
@import "../../../../assets/css/sass/utils/variables";
@import "../../../../assets/css/sass/utils/mixins";
@import "../../../../assets/css/sass/vendors/modular-scale";

$green: #45b964;

.appearance_page_storefront-welcome {

	.storefront-wrap {
		background: #e9eff3;
		padding: 50px;
		border: 10px solid #fff;
		margin-top: 20px;
		margin-right: 20px;
		color: #608299;

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			color: #2e4453;
		}

		a {
			color: #00aadc;
			text-decoration: underline;
		}
	}

	.storefront-welcome-nav {
		background-color: #0087be;
		margin: -50px -50px 0;

		a {
			text-decoration: none;
			color: #fff;
			display: inline-block;
			padding: 1em;
		}

		.storefront-welcome-nav__version {
			float: right;
			color: #a5c9e1;
			display: inline-block;
			padding: 1em 2em;
		}

		ul,
		li {
			list-style: none;
			padding: 0;
		}

		ul {
			margin: 0 0 0 1em;
		}

		li {
			display: inline-block;
			margin: 0;
		}
	}

	.storefront-logo {
		border: 0;
		background: #fff;
		display: block;
		margin: 0 auto;
		border-radius: 100%;
		width: 150px;
		height: 150px;
		text-align: center;
		position: relative;
		margin-top: -20px;

		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 90px;
			height: auto;
		}
	}

	.storefront-intro {
		max-width: 415px;
		margin: 0 auto;
		text-align: center;

		h1 {
			line-height: 1.5;
			font-weight: 400;

			span {
				display: block;
				font-size: 75%;
			}
		}

		.notice-input {
			text-align: left;
		}

		.notice-input:last-of-type {
			margin-bottom: 16px;
		}
	}

	.sf-nux-dismiss-button {
		margin-left: 16px;
	}

	.storefront-enhance {
		display: flex;
		justify-content: center;
		align-items: stretch;
		margin: 4em 0;

		.storefront-enhance__column {
			border: 1px solid #d8e2e9;
			width: 300px;
			margin: 0 1em;
			background: #fff;

			h3 {
				font-size: 1em;
				font-weight: 400;
				color: #87a6bc;
				border-bottom: 1px solid #d8e2e9;
				padding: 1em 1.5em;
				margin: 0;
			}

			img {
				width: 100%;
				height: auto;
				margin-bottom: 1.5em;
			}
		}

		.storefront-bundle,
		.storefront-child-themes {
			padding-bottom: 0.5em;

			p {
				padding: 0 1.5em;
				margin: 0 0 1em;
			}
		}

		.storefront-bundle {
			order: 2;

			.bundle-image {
				display: block;
				background: #f7f7f7;
				margin-bottom: 1.5em;

				img {
					display: block;
					max-width: 75%;
					margin: 0 auto;
				}
			}
		}

		.storefront-child-themes {
			order: 3;
		}
	}

	a.storefront-button {
		color: #2e4453;
		border: 1px solid #c8d7e1;
		padding: 0.5em 1em;
		border-radius: 3px;
		font-weight: 600;
		display: inline-block;
		box-shadow: 0 1px 0 #c8d7e1;
		text-decoration: none;
		background-color: #fff;
		text-shadow: none;
		height: auto;
		line-height: 1.5;

		&:hover {
			border-color: #a8bece;
			box-shadow: 0 1px 0 #a8bece;
		}

		&.disabled {
			cursor: default;
			color: #c8d7e1;

			&:hover {
				border-color: #c8d7e1;
				box-shadow: 0 1px 0 #c8d7e1;
			}
		}
	}

	.automattic {
		text-align: center;
		clear: both;

		p {
			font-size: 0.75em;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: #aaa;
		}

		img {
			max-height: 9px;
			margin: 0 ms(-3);
			margin-top: -3px;
			opacity: 0.5;
		}
	}
}

@media all and (max-width: 768px) {

	.appearance_page_storefront-welcome {

		.storefront-logo {
			margin-top: 20px;
		}

		.storefront-enhance {
			display: block;
			margin: 2em 0;

			.storefront-enhance__column {
				margin: 1em auto;
			}
		}
	}
}
