//Page Wrappers

// Need to combat WP Core's common.css by adding a bit of specificity.
#as3cf-settings {
	&.wpome {

		.page-wrapper {
			h2.page-title {
				font-size: 0.9375rem;
				color: var(--as3cf-color-gray-900);
				font-weight: 500;
				margin: 0 0 1.25rem;
			}
		}

		.lite-wrapper {
			display: flex;
			max-width: 1110px;

			@media(max-width: 1024px) {
				.as3cf-sidebar {
					display: none;
				}
			}

			.page-wrapper {
				width: 840px;

				&.assets, &.tools {
					width: 768px;
				}
			}

			.page-wrapper.media {
				width: 780px;
				max-width: 780px;
			}

			.media-page.wrapper {
				flex-direction: column !important;

				.panel {
					width: 100%;
					max-width: 780px;
				}

				.delivery-settings {
					margin: 0;
					display: none;

					&.active {
						display: flex;
					}
				}

				.storage-settings {
					margin: 0;
					display: none;

					&.active {
						display: flex;
					}
				}
			}

			.panel.url-preview {
				width: 100%;
				max-width: 780px;
			}

			.fixed-cta-block {
				.buttons {
					width: calc(1110px + 4rem); // Page's max width + margin (buttons match with padding).
					max-width: calc(1110px + 4rem); // Page's max width + margin (buttons match with padding).

					@media screen and (max-width: 1024px) {
						max-width: calc(780px + 4rem); // Single Panel without Sidebar's max width + margin (buttons match with padding).
					}
				}
			}
		}

		.media-page.wrapper {
			margin: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			@media (max-width: 1100px) {
				flex-direction: column;
			}

			.panel {
				@media (max-width: 1100px) {
					max-width: 100%;
				}
			}

			.delivery-settings,
			.storage-settings {
				display: flex;
				flex-direction: column;
			}

			.storage-settings {
				margin: 0 2rem 0 0;

				@media (max-width: 1100px) {
					margin: 0;
					display: none;

					&.active {
						display: flex;
					}
				}
			}

			.delivery-settings {
				margin: 0 0 0 2rem;

				@media (max-width: 1100px) {
					margin: 0;
					display: none;

					&.active {
						display: flex;
					}
				}
			}
		}

		.subpage.wrapper, .subpage.page-wrapper {
			margin: 0;
			max-width: 840px;
		}

		.storage-page.wrapper {
			.panel.multi {
				.panel-container {
					.panel-row.tab-buttons {
						gap: 1.5rem;
						flex-wrap: wrap;

						.button-tab {
							margin: 0;
							flex: 0 0 auto;
						}
					}

					.notification.notice-qsg {
						width: 100%;
					}
				}
			}
		}

		.delivery-provider-settings-page.wrapper {
			.panel.multi {
				.panel-container {
					.panel-row.delivery-provider-buttons {
						.row {
							margin-bottom: 1.25rem;
							display: flex;
							align-items: center;
							width: 100%;

							&:last-of-type {
								margin-bottom: 0;
							}

							.button-tab {
								width: 12rem;

								&:not(.btn-disabled):hover, &.active {
									~ p {
										font-weight: 600;
										opacity: 1;
									}
								}
							}

							p {
								margin: 0;
							}

							.speed,
							.private-media {
								margin-left: 1.5rem;
								opacity: 0.7;
								font-size: 0.8125rem
							}

							.help {
								margin-left: auto;
								display: flex;
							}
						}
					}
				}
			}
		}

		.licence-page.wrapper {
			margin: 0 0 2rem;
			max-width: 700px;
			display: flex;
			flex-direction: row;

			&.defined {
				flex-direction: column;
				align-items: flex-start;
				gap: 0.5rem;

				.wp-config {
					margin-left: 0;
					flex: 0 0 auto;
				}
			}
		}

		.support-page.wrapper {
			margin: 0;
			max-width: 960px;

			.columns {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.licence-type {
				margin-bottom: 3rem;

				span {
					font-weight: 700;
					color: var(--as3cf-color-primary-500);
				}
			}

			.lite-support {
				margin-bottom: 2rem;

				p {
					line-height: 1.8;
					font-weight: 400;
				}
			}
		}

		.assets-page.wrapper {
			margin: 0;
			max-width: 768px;

			.assets-panel {
				padding: 0.45rem 0;
				max-width: 768px;
			}

			.notice {
				margin-right: auto;
			}

			.settings {
				margin-bottom: 2rem;
				max-width: 100%;
			}

			.panel-row {
				&.status {
					padding: 1.75rem 0 0 4rem !important;
					height: max-content;

					img {
						width: 18px;
						height: 18px;
					}

					h4 {
						margin-left: 0.8rem;
					}

					p {
						margin: 0 !important;
					}
				}

				&.last-checked {
					display: flex;
					align-items: center;
					margin: 0.7rem 0 0 4.7rem !important;
					height: max-content;

					p {
						font-size: 0.75rem;
						margin: 0 !important;
					}

					a {
						margin-left: 1rem;
						text-decoration: underline;
					}
				}
			}
		}

		.tools-page.wrapper {
			margin: 0;
			max-width: 768px;

			.panel.multi {
				.panel-container.tools-panel {
					padding: 0 0 0.45rem;

					.panel-row {
						&.header {
							height: 4.5rem !important;

							img {
								margin-right: 2rem;
							}

							button {
								margin-left: auto;
							}

							.emoji-party {
								font-size: 28px;
							}
						}

						&.body {
							padding: 1.6rem 2.6rem 1.6rem 6.1rem;

							&.show-progress {
								margin: 0;
								display: flex;
								flex-direction: column;

								.status {
									display: flex;
									flex-direction: row;
									width: 100%;
									align-items: baseline;

									h4 {
										font-size: 0.8125rem;
										color: var(--as3cf-color-gray-900);
										font-weight: 400;
										margin: 0;
										opacity: 80%;

										strong {
											font-size: 1.0625rem;
											font-weight: 600;
											opacity: 100%;
										}
									}
								}

								.progress-bar {
									width: 100%;
									margin-top: 1rem;
								}
							}
						}

						&.desc {
							font-size: 0.8125rem;
							color: var(--as3cf-color-gray-500);
							line-height: 1.65;
						}
					}
				}
			}
		}

		// URL Preview
		.panel.url-preview {
			max-width: 100%;

			.panel-row {
				&.desc p {
					font-size: 0.8125rem;
					color: var(--as3cf-color-gray-600);
					line-height: 1.625;
					margin: 1.5rem 0 0;
				}

				/* Good for Firefox & Safari, but Chrome isn't ready for this yet, experimental in v105.
				 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/contain#inline-size
				 */
				@supports (contain: inline-size) {
					&.body {
						contain: inline-size;
					}
				}

				dl {
					margin: 1rem -1.5rem;
					padding: 0 1.5rem 1rem;

					display: flex;
					gap: 0.5rem;

					overflow-x: auto;

					div {
						margin: 0;
						padding: 0;

						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 2px;

						background: #E1E5E9;
						border-radius: 6px;

						dt {
							margin: 0;
							padding: 0.5rem 1rem 0.375rem;
							white-space: nowrap;

							font-weight: 510;
						}

						dd {
							margin: 0;
							padding: 0.407rem 1rem;
							white-space: nowrap;

							display: flex;
							flex-direction: column;
							align-items: center;
							align-self: stretch;

							background: #FAFAFA;
							border: 1px solid #CBD5E0;
							border-radius: 6px;

							font-weight: 400;
							font-size: 0.75rem;
						}
					}
				}

				/* Required until Chrome gets contain: inline-size */
				@supports not (contain: inline-size) {
					dl {
						contain: size;
						width: 100%;
						height: 68px;
					}
				}
			}
		}

		//Panel - Dashboard Setting Styling
		.panel {
			flex: 1 0 auto;
			max-width: 575px;
			margin-bottom: 3rem;
			display: flex;
			flex-direction: column;

			.heading {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				gap: 0.5rem;
			}

			h2 {
				font-size: 0.9375rem;
				color: var(--as3cf-color-gray-900);
				font-weight: 500;
				margin: 0 0 1.25rem;
			}

			.notification {
				&.inline {
					margin-left: 5rem;
					margin-right: 1.5rem;
				}
			}

			.panel-container {
				flex: 1 0 auto;
				display: flex;
				flex-direction: column;
				background: var(--as3cf-color-white);
				border: 1px solid var(--as3cf-wordpress-border-color);
				box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.05), 0 2px 1px 0 rgba(0, 0, 0, 0.03);
				border-radius: 6px;

				.panel-row {
					display: flex;
					align-items: center;
					padding: 0 1.5rem;

					&.header {
						height: 6rem;
						border-bottom: 1px solid var(--as3cf-separator-color);
					}

					&.footer {
						border-top: 1px solid var(--as3cf-separator-color);
						border-bottom-left-radius: 5px;
						border-bottom-right-radius: 5px;
					}

					h3, h4 {
						font-size: 0.875rem;
						font-weight: 500;
						color: var(--as3cf-color-gray-800);
						margin-left: 1rem;
						margin-right: auto;
					}

					.link {
						font-size: 0.8125rem;
						text-align: right;
						line-height: 1.5;
						margin-left: auto;
						font-weight: 500;

						& + .help {
							margin-left: 1rem;
						}
					}
				}

				.setting {
					.panel-row {
						&.option {
							margin-top: 1.5rem;

							h4 {
								margin: 0 0 0 var(--as3cf-settings-option-indent);
							}

							a {
								margin-left: auto;
							}
						}

						&.desc {
							padding-right: var(--as3cf-settings-option-indent-right);

							p {
								font-size: 0.8125rem;
								color: var(--as3cf-color-gray-600);
								line-height: 1.625;
								margin-left: calc(var(--as3cf-settings-ctrl-width) + var(--as3cf-settings-option-indent));
								margin-top: 0.57rem;
								margin-bottom: 0.75rem;
							}
						}

						&.input {
							padding-right: var(--as3cf-settings-option-indent-right);

							input[type=text] {
								margin-left: calc(var(--as3cf-settings-ctrl-width) + var(--as3cf-settings-option-indent));
								margin-bottom: 1.2rem;
								width: 100%;

								// A label following a panel-row input is purely for accessibility.
								& + label {
									visibility: collapse;
								}
							}
						}
					}

					//Nested setting
					&.nested {
						margin: 0 0 0.125rem 5.25rem;
						display: flex;
						flex-direction: column;
						border-left: 2px dotted #C2CBD3;

						.panel-row {
							height: max-content;
							margin-bottom: 0;

							img {
								margin-left: auto;
							}

							h4 {
								margin: 0;
							}

							&.option {
								margin-top: 1rem;
							}

							&.desc {
								height: max-content;
								padding: 0.4rem 2.25rem 0.85rem 1.65rem;

								p {
									font-size: 0.8125rem;
									color: var(--as3cf-color-gray-600);
									line-height: 1.625;
									margin: 0;
								}
							}

							&.input {
								input[type=text] {
									margin-left: var(--as3cf-settings-input-indent);
								}
							}
						}
					}

					&:last-of-type {
						margin-bottom: 0.75rem;
					}
				}

				hr {
					height: 1px;
					width: 100%;
					border: 0;
					margin: 0;
					background: var(--as3cf-separator-color);
				}
			}

			//Panel - Storage Provider Settings
			&.multi {
				max-width: 840px;
				margin-bottom: 2rem;

				.panel-container {
					&.toggle-header {
						.toggle-switch {
							margin-right: 1.25rem;
						}

						.toggle-reveal {
							label {
								display: inline-flex;
							}

							a {
								margin-left: 0.3rem;
								display: contents;
							}
						}
					}

					.panel-row {
						height: auto;

						h3 {
							margin: 0;
						}

						p {
							&:last-of-type {
								margin-bottom: 0;
							}
						}

						&.header {
							height: 4rem;
							display: flex;

							a {
								margin-left: auto;
								display: flex;
								align-items: center;
							}

							.provider {
								display: flex;
								margin-left: auto;
								align-items: center;

								a {
									display: flex;
									align-items: center;
									margin-left: auto;
								}

								img {
									width: 24px;
									height: 24px;
									margin-right: 0.5rem;
								}
							}

							.wp-config + .provider {
								margin-left: 1rem;
							}
						}

						&.body {
							padding: 2.5rem;
							align-items: flex-start;

							.row {
								margin: 0;
								width: 100%;

								&.radio-btns {
									margin-bottom: 2.2rem;
								}
							}

							.radio-desc {
								margin: -0.35rem 0 1.25rem 2rem;
								font-size: 12px;
								font-weight: 500;
								line-height: 1.4;
								opacity: .75;

							}

							&.access-keys {
								> p {
									margin-bottom: 1.5rem !important;
								}
							}

							input[type=text],
							textarea {
								width: 100%;
								margin-bottom: 1.5rem;
							}

							.bucket-name, .cdn-name {
								width: 100%;
							}

							p {
								margin: 0 0 1.5rem;
								line-height: 1.5;

								&:last-of-type {
									margin-bottom: 0;
								}
							}

							.link {
								text-decoration: underline;
							}

							.button-tab {

								img {
									width: 24px;
									height: 24px;
									margin-right: 0.9rem;
								}

								.checkmark {
									width: 16px;
									height: 16px;
									position: absolute;
									right: -19px;
									top: -5px;
								}

								p {
									font-weight: 500;
									margin-bottom: 0;
								}
							}

							.radio-btn {
								margin-bottom: 0.8rem;

								&:last-of-type {
									margin-bottom: 0;
								}

								&.list {
									margin: 0 1.5rem 0 0;
								}
							}

							.bucket-list {
								background: var(--as3cf-color-white);
								border: 1px solid var(--as3cf-wordpress-border-color);
								box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
								border-radius: 6px;
								width: 100%;
								max-width: 580px;
								padding: 0 0.4rem;
								display: flex;
								flex-direction: column;
								height: 260px;
								overflow-y: scroll;
								box-sizing: border-box;

								.row {
									display: flex;
									align-items: center;
									padding: 0.78rem 1.4rem;
									background: #F6F7F8;
									border-radius: 4px;
									margin: 0 0 0.3rem;
									cursor: pointer;
									box-sizing: border-box;
									flex: none;

									&.active {
										background: rgba(236, 112, 94, 0.10);
										border: 1px solid var(--as3cf-color-primary-500);
										border-radius: 4px;
									}

									&:first-of-type {
										margin-top: 0.4rem;
									}

									&:last-of-type {
										margin-bottom: 0.4rem;
									}

									&:nth-child(even) {
										background: var(--as3cf-color-white);
									}

									p {
										margin: 0;
										font-size: 0.84375rem;
									}

									.status {
										margin-left: auto;
									}

									/* TODO: Better styling for no buckets in browse list? */
									&.nothing-found {
										cursor: default;
										justify-content: center;
										align-items: center;
									}
								}
							}

							.new-bucket-details {
								display: flex;
								flex-direction: column;
								box-sizing: border-box;
								margin-right: 1.8rem;
								flex: 5;
							}

							.region {
								width: 30%;
								flex: 3;
								margin-left: auto;
								margin-bottom: 1.5rem;
								box-sizing: border-box;
							}
						}
					}
				}
			}

			&.flyout {
				position: absolute;
				top: 50px;
				right: 0;
				min-width: 384px;
				z-index: 99;
				cursor: default;

				&.multi {
					.panel-container {
						.panel-row {
							&.header {
								height: auto;
								padding: 1rem 1.5rem;
								align-items: center;

								h3 {
									font-size: 13px;
									font-weight: 600;
									flex: 1 1 auto;
								}
							}

							&.summary {
								padding: 0;

								table {
									width: 100%;
									border-collapse: collapse;

									th, td {
										padding: 0 0 1rem 2rem;

										color: var(--as3cf-color-gray-800);
										font-size: 12px;
										text-align: left;

										/* Make title column cell's width stretch, numerics are compact. */
										width: 100%;
									}

									/* Indent the columns. */
									th:first-of-type, td:first-of-type {
										padding-left: 1.5rem;
									}

									th:last-of-type, td:last-of-type {
										padding-right: 1.5rem;
									}

									/* Table header has different styling and vertical padding. */
									thead {
										background-color: var(--as3cf-color-gray-100);

										tr {
											border-bottom: 1px solid var(--as3cf-separator-color);

											th {
												padding-top: 10px;
												padding-bottom: 10px;

												color: var(--as3cf-color-gray-700);
												font-weight: 500;
												font-size: 10px;
											}
										}
									}

									/* Top and bottom rows have different vertical padding than between rows. */
									tbody, tfoot {
										tr:first-of-type {
											td {
												padding-top: 1rem;
											}
										}

										tr:last-of-type {
											td {
												padding-bottom: 1rem;
											}
										}
									}

									tfoot {
										/*
										 * Hack in an indented border even though table header has
										 * full width background and borders, without using extra
										 * cells, and retaining relationship between header
										 * and main body columns.
										 *
										 * PhpStorm will complain that there's no colours here, but there are!
										 */
										background-image: linear-gradient(var(--as3cf-separator-color), var(--as3cf-separator-color));
										background-repeat: no-repeat;
										background-size: calc(100% - 1.5rem - 1.5rem) 1px;
										background-position: 1.5rem 0;

										td {
											font-weight: 500;
										}
									}

									.numeric {
										text-align: right;
										width: max-content;
										min-width: max-content;
										white-space: nowrap;
									}

									a {
										color: var(--as3cf-color-primary-500);
									}
								}
							}

							&.footer {
								padding: 1.5rem;
								display: flex;

								&.upsell {
									border-top: 1px solid var(--as3cf-color-primary-100);
									background-color: var(--as3cf-color-primary-50);
									flex-direction: column;

									p {
										margin-bottom: 0.5rem;
										white-space: nowrap;
									}

									.button {
										margin: 0;
										width: 100%;
									}
								}

								&.offload-remaining {
									background-color: var(--as3cf-color-gray-100);

									button {
										flex: 100%;
									}
								}

								&.licence {
									display: flex;
									align-items: center;
									padding-top: 10px;
									padding-bottom: 10px;
									background-color: var(--as3cf-color-gray-200);
									font-size: 12px;

									.details {
										flex: 1 1 auto;

										p {
											color: var(--as3cf-color-gray-600);
											line-height: 18px;
										}

										.title {
											color: var(--as3cf-color-gray-700);
											font-size: 10px;
										}
									}

									a {
										color: var(--as3cf-color-primary-500);

										&.upgrade {
											margin-right: 1rem;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		// Defined in wp-config.php
		// NOTE: Moved from .multi .header so it's generally usable.
		// TODO: So need to check specificity when used in Storage Provider's authentication method panel etc.
		p.wp-config {
			margin-left: auto;
			padding: 0.4rem 0.75rem;
			color: var(--as3cf-color-gray-500) !important;
			background: rgba(113, 135, 154, 0.15) !important;
			border: 1px solid rgba(113, 135, 154, 0.15) !important;
			border-radius: 5px;
			font-size: 0.84375rem;
			font-weight: 500;
			white-space: nowrap;
		}

		.panel {
			.panel-container {
				.setting {
					.panel-row {
						&.option {
							p.wp-config + a {
								margin-left: 1rem;
							}
						}

						&.desc {
							p.wp-config {
								margin-right: 0;
							}
						}

						label.input-label {
							p.wp-config {
								text-transform: none;
								padding: 0.2rem 0.5rem;
							}
						}
					}
				}
			}
		}

		//Info Notice
		.notice {
			all: unset;
			display: flex;
			flex-direction: row;
			background: rgba(56, 125, 189, 0.10);
			border: 1px solid #AFC8ED;
			border-radius: 5px;
			padding: 0.8rem 1.25rem;
			align-items: center;

			a,
			p {
				margin: 0 !important;
			}

			a {
				display: inline-block;
				text-decoration: underline;
				font-size: 0.875rem !important;
			}
		}

		//Support Form & Diagnostics
		.support-form {
			width: 600px;

			input[type=text],
			select,
			textarea {
				width: 100%;
				margin-bottom: 1rem;
			}

			textarea {
				margin-bottom: 1.5rem;
			}

			.note {
				font-size: 0.78125rem;
				color: var(--as3cf-color-gray-500);
				margin-bottom: 2.5rem;
				line-height: 1.5;

				&.first {
					margin-bottom: 0.5rem;
				}
			}

			.actions {
				display: flex;
				width: 100%;
				margin-bottom: 2rem;
				align-items: center;

				.btn-primary {
					margin-left: auto;
				}
			}
		}

		.diagnostic-info {
			max-width: 600px;
			padding: 0.25rem 0;

			pre {
				height: 14.375rem;
				white-space: pre-wrap;
				word-break: keep-all;
			}

			hr {
				background: #D3D7DB;
				height: 3px;
				width: 100%;
				border: 0;
				margin-bottom: 3rem;
			}

			.btn-outline {
				display: flex;
				justify-content: center;
				margin-left: auto;
				width: max-content;
			}
		}

		.documentation {
			background: #E4E5E7;
			border: 1px solid var(--as3cf-wordpress-border-color);
			box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
			border-radius: 6px;
			padding: 2.5rem;
			display: flex;
			flex-direction: column;
			margin: 1.4rem 0 0 3rem;
			height: max-content;
			width: 240px;
			box-sizing: border-box;

			h3 {
				font-size: 1.03125rem;
				color: var(--as3cf-color-gray-900);
				letter-spacing: 0.15px;
				font-weight: 500;
				margin: 0 0 2.25rem;
			}

			a {
				font-size: 0.875rem;
				margin-bottom: 1.25rem;

				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}

		.upsell {
			&.panel {
				max-width: 768px;
			}

			.panel-container {
				padding: 0;
				flex-direction: row;
				background: linear-gradient(136.01deg, rgba(255, 228, 205, 0.7) 0.94%, rgba(255, 255, 255) 33.33%);
			}

			.branding {
				background: url(../../assets/img/brand/upsell-bunny.svg) no-repeat left bottom;
				min-width: 280px;
				border-radius: 5px;
				margin-right: -1.25rem;
			}

			@media (max-width: 840px) {
				.branding {
					display: none;
				}
			}

			.button {
				margin: 1rem auto;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center !important;
			}
		}
	}
}