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

$green: #45B964;

.appearance_page_storefront-welcome {
	.storefront-wrap {
		background: #E9EFF3;
		padding: 50px;
		border: 10px solid white;
		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 -50px;

		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%;
			}
		}
	}

	.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-free-plugins {
			order: 1;
			position: relative;

			&:after {
				content: "";
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 20px;
				background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
			}

			.storefront-free-plugins__wrap {
				min-height: 390px;
				max-height: 390px;
				overflow: scroll;
				margin: 0;

				.storefront-plugin {
					padding: 1.5em;
					border-bottom: 1px solid #D8E2E9;
					margin: 0;

					h4,
					p {
						margin: 0 0 1em;
					}

					p:last-child {
						margin-bottom: 0;
					}
				}
			}

			.storefront-button {
				margin-right: .5em;
			}
		}

		.storefront-bundle,
		.storefront-child-themes {
			padding-bottom: .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: .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: .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;
			}
		}
	}
}
