@import "@automattic/onboarding/styles/mixins";

.theme-jetpack-cloud .backup-contents-page {
	--wp-components-color-accent: var(--studio-jetpack-green-50);
	--wp-admin-theme-color: var(--studio-jetpack-green-50);
}

.backup-contents-page {
	.card {
		padding: 24px 22px;
	}

	&__back-button.components-button.is-link {
		color: #000;
		padding: 12px 0;
		text-decoration: none;
		margin: 4px 0;

		svg {
			margin-right: 2px;
		}
	}

	.status-card__header-content {
		align-items: center;
		display: flex;
		// Given the layout is mobile-first, reverse the div arrangement by default
		flex-direction: column-reverse;
	}

	.status-card__learn-about {
		font-size: $font-body-small;
		font-weight: 400;
		text-decoration-line: underline;
	}

	.status-card__learn-about a {
		color: var(--studio-gray-80);
	}

	// We are using the deprecated mixin to match the when the mobile navigation appears
	// which is at 660px instead of the 600px break-small breakpoint.
	@include breakpoint-deprecated( ">660px" ) {
		&__back-button.components-button.is-link {
			padding: 0 0 12px 0;
			margin: 0;
		}

		.status-card__header-content {
			// Return to the default div arrangement on the desktop
			flex-direction: row;
			flex-grow: 1;
		}

		.status-card__learn-about {
			margin-left: auto;
		}
	}

	&__header {
		padding-left: 2px;
		padding-right: 2px;

		&.daily-backup-status {
			box-shadow: none;
			margin-bottom: 0;
		}

		.components-button.is-secondary {
			box-shadow: none;
		}
	}

	&__body {
		overflow-x: auto;
		padding-bottom: 14px;
	}

	.file-browser-node {
		margin-top: 2px;
		margin-left: 2px;
		&.is-root {
			padding-top: 30px;
		}
		&.wordpress > .file-card .file-card__actions {
			margin-top: 0;
		}

		&__loading {
			&.placeholder {
				height: 26px;
				margin: 6px;
				@include placeholder();
			}
		}

		&.is-root > .file-browser-node__contents {
			padding-left: 0;
		}

		.file-browser-node__title {
			white-space: nowrap;
			overflow: hidden;
		}

		.components-button.has-icon.has-text svg {
			fill: var( --theme-base-color );
		}

		.components-button.is-tertiary {
			border: 0;
			color: var( --theme-base-color );
		}

		.is-alternate {
			background-color: var(--studio-gray-0);
		}

		.file-card {
			background-color: var(--studio-gray-0);

			.components-button.is-secondary {
				background: #fff;
				border: 0;
				color: var( --theme-base-color );
			}

			&__preview-sensitive {
				background-color: var(--studio-gray-60);
				padding: 20px 8px;
			}

			&__preview-sensitive svg {
				fill: #fff;
			}

			&__preview-sensitive p {
				color: #fff;
			}
			&__detail {
				font-size: $font-body-small;
			}
		}

		.form-checkbox {
			margin: 8px;
			&.mixed {
				background-color: var(--studio-gray-10);
			}
		}
	}

	.file-browser-header {
		padding: 0 2px;
		border-bottom: 1px solid var(--studio-gray-5);
		.file-browser-header__selecting {
			margin-top: 20px;
			padding: 6px 0;
		}
	}

	.components-checkbox-control {
		margin-left: 8px;
	}
}
