$aws_orange: #f7a80d;

.aws-content,
.aws-updated,
.aws-compatibility-notice {
	box-sizing: border-box;
	max-width: 650px;
}

.aws-addons,
.aws-main[data-view="addons"] .aws-compatibility-notice {
	max-width: 772px;
}

.aws-settings {
	h3 {
		font-size: 20px;
	}

	.need-help {
		background-color: #fff;
		padding: 20px 20px 20px 50px;
		line-height: 1;
		font-size: 16px;
		font-weight: bold;
		position: relative;

		&:before {
			font-family: "dashicons";
			content: "\f348";
			font-size: 24px;
			line-height: 1;
			width: 24px;
			height: 24px;
			position: absolute;
			top: 16px;
			left: 16px;
		}

		a {
			text-decoration: none;
		}
	}

	p {
		font-size: 14px;
	}
}

body.toplevel_page_amazon-web-services .wrap {
	h2 {
		color: #fff;
		font-weight: 600;
		font-size: 26px;
		line-height: 1;
		margin: 20px 0 15px 0;
		width: 650px;
		padding: 100px 0 0 25px;
		height: 150px;
		background: $aws_orange url(../img/aws-logo.svg) right 40px center no-repeat;
		background-size: 100px 79px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
}

/**
 * Addons page
 */
.aws-addons {
	.addons-list {
		margin: 20px 0 200px;
		padding-top: 5px;
		border-top: 1px solid #ddd;
		font-size: 14px;

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

		// First depth
		article {
			margin-top: 10px;
			width: 100%;
			height: 250px;
			position: relative;
			font-weight: 300;
			line-height: 1;
			overflow: hidden;

			.info {
				position: absolute;
				bottom: 20px;
				left: 20px;

				ul {
					margin: 16px 0 0;
					color: rgba(255, 255, 255, .7);

					li {
						display: inline-block;
						margin: 0 30px 0 0;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				a {
					color: #fff;
					text-decoration: none;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			h1 {
				margin: 0;
				color: #fff;
				font-size: 26px;
				line-height: 1;
				font-weight: 600;
			}

			h2 {
				margin: 4px 0 0;
				padding: 0;
				font-size: 18px;
				line-height: 1;
				font-weight: 600;
				color: #fff;
			}

			.label {
				position: absolute;
				top: 10px;
				right: 10px;
				font-style: italic;
				color: #fff;
			}
		}

		// Second depth
		ul {
			margin: 0 120px 0 80px;

			article {
				height: 100px;

				.info {
					position: static;
					padding: 25px 20px 25px 100px;

					ul {
						margin: 12px 0 0;
					}
				}

				h1 {
					font-size: 22px;
				}
			}

			// Third depth
			ul {
				margin-right: 0;

				article {
					height: 80px;

					.info {
						padding: 19px 10px 19px 80px;

						ul {
							margin: 8px 0 0;
						}
					}

					h1 {
						font-size: 20px;
						font-weight: 300;
					}
				}
			}
		}

		.amazon-s3-and-cloudfront article {
			background-image: url(../img/as3cf-banner.jpg);
			background-size: 772px 250px;
			background-repeat: no-repeat;

			@media (min--moz-device-pixel-ratio: 1.3),
			(-o-min-device-pixel-ratio: 2.6/2),
			(-webkit-min-device-pixel-ratio: 1.3),
			(min-device-pixel-ratio: 1.3),
			(min-resolution: 1.3dppx) {
				background-image: url(../img/as3cf-banner@2x.jpg);
			}
		}

		.amazon-s3-and-cloudfront-pro article {
			background: #d4a637 url(../img/icon-pro.svg) no-repeat 15px center;
			background-size: 70px 70px;
		}

		.amazon-s3-and-cloudfront-woocommerce article {
			background: #a46497 url(../img/icon-woocommerce.svg) no-repeat 15px center;
			background-size: 50px 50px;
		}

		.amazon-s3-and-cloudfront-edd article {
			background: #1d2428 url(../img/icon-edd.svg) no-repeat 15px center;
			background-size: 50px 50px;
		}

		.amazon-s3-and-cloudfront-assets article {
			background: #0769ad url(../img/icon-assets.svg) no-repeat 15px center;
			background-size: 50px 50px;
		}

		// Tree hierarchy
		li li.addon {
			position: relative;

			&:before,
			&:after {
				content: '';
				position: absolute;
				display: block;
				background: #ddd;
			}

			&:before {
				top: 0;
				left: -45px;
				width: 10px;
				height: 65px;
			}

			&:after {
				top: 55px;
				left: -45px;
				width: 35px;
				height: 10px;
			}

			// Second depth
			li:before {
				height: 45px;
			}

			li:after {
				top: 35px;
			}

			// Adjust height for all but first child
			&:not(:first-child) {
				&:before {
					top: -45px;
					height: 80px;
				}
			}

			.info {
				span.type {
					position: absolute;
					top: 10px;
					right: 15px;
					font-style: italic;
					color: #fff;
				}
			}
		}
	}
}