@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

.global-styles-ui-screen-revisions__revisions-list {
	list-style: none;
	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
	// Forces subsequent flex items to the bottom.
	flex-grow: 1;
	li {
		margin-bottom: 0;
	}
}

.global-styles-ui-screen-revisions__revision-item {
	position: relative;
	cursor: var(--wpds-cursor-control);
	display: flex;
	flex-direction: column;

	&[role="option"]:active,
	&[role="option"]:focus {
		@include button-style__focus();
	}

	&:hover {
		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
		.global-styles-ui-screen-revisions__date {
			color: var(--wp-admin-theme-color);
		}
	}

	&::before,
	&::after {
		position: absolute;
		content: "\a";
		display: block;
	}

	&::before {
		background: $gray-300;
		border-radius: 50%;
		height: $grid-unit-10;
		width: $grid-unit-10;
		top: $grid-unit-20 + 2;
		left: $grid-unit-20 + 1; // So the circle is centered on the line.
		transform: translate(-50%, -50%);
		z-index: 1;

		// This border serves as a background color in Windows High Contrast mode.
		border: 4px solid transparent;
	}

	&[aria-selected="true"] {
		border-radius: $radius-small;

		// Only visible in Windows High Contrast mode.
		outline: 3px solid transparent;
		outline-offset: -2px;

		color: var(--wp-admin-theme-color);
		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);

		.global-styles-ui-screen-revisions__date {
			color: var(--wp-admin-theme-color);
		}

		&::before {
			background: var(--wp-admin-theme-color);
		}

		.global-styles-ui-screen-revisions__changes > li,
		.global-styles-ui-screen-revisions__meta {
			color: $gray-900;
		}
	}

	&::after {
		height: 100%;
		left: $grid-unit-20;
		top: 0;
		width: 0;
		border: 0.5px solid $gray-300;
	}

	&:first-child::after {
		top: $grid-unit-20 + 2;
	}

	&:last-child::after {
		height: $grid-unit-20 + 2;
	}
}
.global-styles-ui-screen-revisions__revision-item-wrapper {
	display: block;
	padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
}

.global-styles-ui-screen-revisions__apply-button.is-primary,
.global-styles-ui-screen-revisions__active-badge {
	align-self: flex-start;
	// Left margin = left padding of .global-styles-ui-screen-revisions__revision-item-wrapper.
	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50;
}

.global-styles-ui-screen-revisions__changes,
.global-styles-ui-screen-revisions__meta {
	color: $gray-700;
	font-size: 12px;
}

.global-styles-ui-screen-revisions__description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: $grid-unit-10;
	.global-styles-ui-screen-revisions__date {
		text-transform: uppercase;
		font-weight: 600;
		font-size: 12px;
	}
}

.global-styles-ui-screen-revisions__meta {
	display: flex;
	justify-content: start;
	width: 100%;
	align-items: flex-start;
	text-align: left;
	margin-bottom: $grid-unit-05;

	img {
		width: $grid-unit-20;
		height: $grid-unit-20;
		border-radius: 100%;
		margin-right: $grid-unit-10;
	}
}

.global-styles-ui-screen-revisions__loading {
	margin: $grid-unit-30 auto !important;
}

.global-styles-ui-screen-revisions__changes {
	text-align: left;
	line-height: $default-line-height;
	margin-left: $grid-unit-15;
	list-style: disc;

	li {
		margin-bottom: $grid-unit-05;
	}
}

.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
	justify-content: space-between;
	gap: 2px;
	.edit-site-pagination__total {
		position: absolute;
		left: -1000px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
	}

	.components-text {
		font-size: 12px;
		// `will-change` is required because something about flex props prevents
		// Safari from rendering the page / total text.
		will-change: opacity;
	}

	.components-button.is-tertiary {
		color: $gray-900;
	}

	.components-button.is-tertiary:disabled,
	.components-button.is-tertiary[aria-disabled="true"] {
		color: $gray-600;
	}
}

.global-styles-ui-screen-revisions__footer {
	height: $grid-unit-70;
	z-index: 1;
	position: sticky;
	min-width: 100%;
	bottom: 0;
	background: $white;
	padding: $grid-unit-15;
	border-top: $border-width solid $gray-300;
	box-sizing: border-box;
}