$aws_orange: #f7a80d;

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

.toplevel_page_amazon-web-services {
	.error,
	.notice,
	.updated {
		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 {
	h1 {
		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, h2 {
				padding: 0;
				color: #fff;
				line-height: 1;
				font-weight: 600;
			}

			h1 {
				margin: 0;
				font-size: 26px;
			}

			h2 {
				margin: 4px 0 0;
				font-size: 18px;
			}

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

		// Addons
		> li > ul {
			background-color: #fff;
			border-top: 0;
			padding: 10px;
			overflow: hidden;

			article {
				display: flex;
				align-items: center;
				justify-content: center;
				
				img {
					width: 100px;
					height: 100px;
				}

				h1 {
					margin-top: 8px;
					font-size: 30px;
					line-height: 1.2;
				}

				.info {
					display: block;
					left: auto;
					bottom: auto;
					margin: 0 auto;
					text-align: center;

					ul {
						li {
							margin-right: 10px;
							font-size: 13px;
							line-height: 1.6;
						}
					}
				}
			}

			li {
				margin-bottom: 0;
			}
		}

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

			@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-bw@2x.jpg);
			}
		}

		.amazon-s3-and-cloudfront-pro > 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-assets > article {
			background-color: #0769ad;
			margin-top: 0;
		}
	}
}