.rewind-flow__content {
	h3 {
		text-wrap: wrap;
	}


	.card {
		margin-top: 1px;
		padding: 48px;
	}
}

.rewind-flow__header {
	align-items: center;
	display: flex;
	margin-bottom: 8px;
	padding-bottom: 0;
	padding-top: 0;
	text-align: left;

	.gridicon {
		fill: var(--color-primary);
	}

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

.rewind-flow__learn-about {
	flex-grow: 1;
	font-size: $font-body-small;
	text-align: right;
	text-decoration-line: underline;
}

.rewind-flow__learn-about a {
	color: var(--studio-gray-80);
}

.rewind-flow__title {
	font-size: 2.25rem;
	line-height: 36px;
	padding-bottom: 12px;
	text-align: left;

	&.error {
		color: var(--color-error);
	}
}

.rewind-flow__icon-placeholder {
	@include placeholder( --color-neutral-light );
	height: 48px;
	width: 48px;
}

.rewind-flow__title-placeholder {
	@include placeholder( --color-neutral-light );
	font-size: $font-title-small;
	font-weight: 600;
}

.rewind-flow__rewind-config-editor {
	margin: 15px 5px;
}

.rewind-flow__rewind-config-editor-label {
	align-items: center;
	display: flex;
	font-size: 0.875rem;
	font-weight: normal;
	margin-bottom: 15px;

	// this is the margin between the checkbox and the label text
	span.rewind-flow__rewind-config-editor-label-text {
		margin-left: 10px;
	}
}

// this rule is extremely specific to override other stylings
input.rewind-flow__rewind-config-editor-checkbox.form-checkbox {
	margin-right: 5px;
	margin-bottom: 2px;
	&:checked::before {
		content: url(/calypso/images/checkbox-icons/checkmark-jetpack.svg);
	}
}

.rewind-flow-notice {
	margin-top: 32px;

	.gridicon {
		margin-right: 5px;
	}

	// the component renders a top-level a or div, depending on if it is a link or not
	a,
	div {
		display: flex;
		flex-direction: row;
		margin-bottom: 16px;
		width: fit-content;
	}

	a,
	h4,
	p {
		font-size: $font-body;
	}

	// this allows the gridicon and text to align on their centers
	p {
		margin: 0;
	}
	a {
		align-items: center;
		display: flex;
	}

	h4 {
		text-wrap: wrap;
	}
}

// when the reminder is default make the header more bold
.rewind-flow-notice__title-reminder h4 {
	font-size: $font-body;
	font-weight: 600;
}

div.rewind-flow-notice__title-notice,
a.rewind-flow-notice__title-notice,
a.rewind-flow-notice__title-notice:visited {
	color: var(--color-neutral-light);
	fill: var(--color-neutral-light);

	&:hover {
		color: var(--color-neutral);
		fill: var(--color-neutral);
	}
}
div.rewind-flow-notice__title-warning,
a.rewind-flow-notice__title-warning,
a.rewind-flow-notice__title-warning:visited {
	.gridicon {
		fill: var(--color-error);
	}

	&:hover {
		fill: var(--color-error-dark);
	}
}

.rewind-flow__btn-group {
	margin-top: 2.5em;

	&--centered {
		text-align: center;
	}
}

.rewind-flow-expired__primary-button {
	border: 1px solid;
	color: #3a6fac;
}

.rewind-flow__primary-button {
	margin-bottom: 0;
	text-align: center;
	width: 100%;

	@include breakpoint-deprecated( ">660px" ) {
		text-align: auto;
		width: auto;
	}
}

.rewind-flow__back-button {
	margin-bottom: 10px;
	text-align: center;
	width: 100%;

	@include breakpoint-deprecated( ">660px" ) {
		width: auto;
		text-align: auto;
		margin-right: 1rem;
	}
}

.rewind-flow__progress-bar {
	margin-bottom: 22.5px;

	p {
		font-size: $font-body-small;
		margin: 0;
	}
}

.rewind-flow__progress-bar-header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.rewind-flow__progress-bar-percent {
	color: var(--studio-gray-50);
}

.rewind-flow__progress-bar-message {
	font-weight: 700;
}

.rewind-flow__progress-bar-entry {
	color: var(--studio-gray-50);
}

.rewind-flow__info,
.rewind-flow__cta,
.rewind-flow-notice__title-warning h4,
.rewind-flow__content p {
	font-size: 0.875rem;
	margin-bottom: 1em;
}

.rewind-flow__cta {
	font-weight: 600;
	padding: 8px 0;

	button {
		color: var(--studio-black);
		text-decoration: none;
		font-weight: 600;
	}
}

.theme-jetpack-cloud .main.rewind-flow {
	margin-left: auto;
}

/* This is a button that's meant to be styled as a link */
.rewind-flow__info .rewind-flow__error-retry-button {
	padding: initial;
	border: initial;
	font-weight: normal;
	vertical-align: initial;
	font-size: initial;
	color: var(--color-link);

	&:hover,
	&:active,
	&:focus {
		background: initial;
		color: var(--color-link-dark);
	}

	&:hover,
	&:active {
		outline: initial;
	}

	&:focus {
		outline: thin dotted;
		box-shadow: initial;
		border: initial;
	}
}

.granular-restore {
	.rewind-flow__files {
		color: var(--studio-gray-60);
		font-size: 0.875rem;
	}

	.rewind-flow__cta {
		padding: 8px 0;
		button {
			color: var(--studio-black);
			text-decoration: none;
			font-weight: 600;
		}
	}

	.rewind-flow__expandable-files {
		margin-bottom: 1.5em;

		button {
			color: var(--studio-black);
		}

		.rewind-flow__files {
			margin-bottom: 0;
		}
	}

	.rewind-flow__show-all {
		margin-top: 16px;
	}

	li {
		list-style: none;
	}

	ul {
		margin-left: 0;
		margin-bottom: 0;
	}
}
