// All css must be inside these selectors to override the default WordPress admin bar styles.
#wpadminbar .quicklinks {
	--sh-dot-size: 10px;
	--sh-line-color: #666;
	--sh-text-color: rgba(240, 246, 252, 0.7);
	--sh-admin-bar-height: 32px;

	#wp-admin-bar-simple-history {
		> .ab-item {
			&::before {
				content: "";
				padding: 0;
				width: 18px;
				// Height of admin bar.
				height: var(--sh-admin-bar-height);
				// Background color will be the fill of the SVG.
				background-color: currentColor;
				mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9Ii0yIC0yIDI0IDI0IiBmaWxsPSJub25lIgogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNC4wNjI3IDAuNzc3NTg2QzkuMjM5MDQgLTEuMjkyNTMgMy43Njk2MiAwLjk1MzcxMSAxLjkxNzEzIDUuMzQ4NjNMMC4zOTEyNCA0LjY5Mzc3QzAuMTY5MDA3IDQuNTk4NCAtMC4wNTg3NTI3IDQuODE2ODcgMC4wMTM3MTIyIDUuMDU1OUwwLjg1MzU3MyA5Ljc3ODU2QzAuOTM1MjQ1IDEwLjA0OCAxLjIzNDM4IDEwLjE3MDEgMS40Njk0MSAxMC4wM0w1LjAzOTQ0IDcuMjA0MTdDNS4yNDQwMyA3LjA4MjIxIDUuMjI0NDQgNi43NjggNS4wMDY0MiA2LjY3NDQzTDMuMzcwODIgNS45NzI0OUM0Ljg5MzM2IDIuNDE0ODQgOS40NDQ4NiAwLjU2ODMgMTMuNDY1NyAyLjI5Mzg4QzE3LjQ4NjUgNC4wMTk0NiAxOS41MDQ2IDguOTI0OTMgMTcuODI2NCAxMy4xODc1QzE2LjE0ODIgMTcuNDUwMSAxMS40NzQ5IDE5LjQ4MzggNy4zODgzMSAxNy43M0M1LjYxNzMxIDE2Ljk3IDQuMjQ3NDUgMTUuNjIzMSAzLjM5OTggMTMuOTk0MUMzLjE5NDA5IDEzLjU5ODcgMi43NDEzMSAxMy40MDIgMi4zNDM0MiAxMy41NzUxQzEuOTQwNDggMTMuNzUwNSAxLjc0NzgxIDE0LjIzNzUgMS45NTAyNCAxNC42NDEyQzIuOTU4MDkgMTYuNjUxIDQuNjIzNDkgMTguMzE2IDYuNzkxMzMgMTkuMjQ2M0MxMS42ODA3IDIxLjM0NDcgMTcuMjcyMiAxOC45MTEzIDE5LjI4IDEzLjgxMTRDMjEuMjg3OSA4LjcxMTQyIDE4Ljk1MiAyLjg3NTkxIDE0LjA2MjcgMC43Nzc1ODZaIiBmaWxsPSJibGFjayIvPgogICAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjI5ODA4IDYuMTcwNzZDOS4yOTgwOCA1Ljc3MzA3IDkuNTk5NTkgNS40NTA2OCA5Ljk3MTUxIDUuNDUwNjhDMTAuMzQzNCA1LjQ1MDY4IDEwLjY0NDkgNS43NzMwNyAxMC42NDQ5IDYuMTcwNzZWMTAuNTIyOUwxMy42ODY3IDEyLjUwMzZDMTQuMDAzNyAxMi43MTAxIDE0LjEwMDggMTMuMTU0NCAxMy45MDIyIDEzLjQ4OTdDMTMuNzA4NCAxMy44MTY4IDEzLjMwNTMgMTMuOTE3NSAxMi45OTYxIDEzLjcxNjFMOS4yOTgwOCAxMS4zMDgxVjYuMTcwNzZaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K") !important;
				mask-size: contain;
				mask-repeat: no-repeat;
				mask-position: center;
			}
		}
	}

	#wp-admin-bar-simple-history-react-root-group {
		min-width: 25rem;
		padding-bottom: 0;

		// Button styles are the same as the regular
		// WP css styles, but due to wpadmin * selector
		// we need to override them here.
		button {
			display: inline-block;
			text-decoration: none;
			font-size: 13px;
			line-height: 2.15384615;
			min-height: 30px;
			margin: 0;
			padding: 0 10px;
			cursor: pointer;
			border-width: 1px;
			border-style: solid;
			border-radius: 3px;
			white-space: nowrap;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			gap: 0.25rem;
			background-color: transparent;
			color: var(--sh-text-color);
			border-color: transparent;
		}

		.button-small {
			min-height: 26px;
			line-height: 2.18181818;
			padding: 0 8px;
			font-size: 11px;
		}
	}

	ul.SimpleHistory-adminBarEventsList {
		// background-color: #4c4c4d;
		padding: 0 15px 15px 15px;

		*,
		*::before,
		*::after {
			line-height: 1;
			padding: 0;
			margin: 0;
		}
	}

	.SimpleHistory-adminBarEventsList--skeleton {
		--sh-skeleton-background-color: currentColor;
		opacity: 0.1;
		min-width: 15rem;

		.SimpleHistory-adminBarEventsList-item-content-meta-skeleton {
			flex: 1;
			background-color: var(--sh-skeleton-background-color);
			height: 1rem;
			margin-top: 0.1rem;
			margin-bottom: 0.2rem;
		}

		.SimpleHistory-adminBarEventsList-item-content-message-skeleton {
			background-color: var(--sh-skeleton-background-color);
			height: 1.3rem;
		}

		li:nth-child(odd) .SimpleHistory-adminBarEventsList-item {
			.SimpleHistory-adminBarEventsList-item-content-meta-skeleton {
				max-width: 50%;
			}
			.SimpleHistory-adminBarEventsList-item-content-message-skeleton {
				max-width: 75%;
			}
		}

		li:nth-child(even) .SimpleHistory-adminBarEventsList-item {
			.SimpleHistory-adminBarEventsList-item-content-meta-skeleton {
				max-width: 60%;
			}
			.SimpleHistory-adminBarEventsList-item-content-message-skeleton {
				max-width: 90%;
			}
		}
	}

	// A element.
	div.SimpleHistory-adminBarEventsList-item,
	a.SimpleHistory-adminBarEventsList-item {
		height: auto !important;
		display: flex;
		margin: 0;
		padding: calc(var(--sh-dot-size) * 1);

		.SimpleHistory-adminBarEventsList-item-dot {
			flex: 0 0 calc(var(--sh-dot-size) * 2);
		}

		.SimpleHistory-adminBarEventsList-item-dot::before {
			content: "";
			display: block;
			background-color: var(--sh-line-color);
			width: var(--sh-dot-size);
			height: var(--sh-dot-size);
			border-radius: 50%;
			transform: translateX(-50%) translateY(90%);
		}

		.SimpleHistoryLogitem__senderImage {
			width: 20px;
			height: 20px;
			border-radius: 10px;
		}

		.SimpleHistoryLogitem__inlineDivided:not(:first-child)::before {
			content: "\b7\a0";
			color: rgb(137, 143, 156);
			margin-left: 6px;
			margin-right: 2px;
		}

		.SimpleHistoryLogitem__when {
			display: flex;
		}

		.SimpleHistory-adminBarEventsList-item-content {
			display: flex;
			flex: 1;
			flex-direction: column;
			gap: calc(var(--sh-dot-size) / 2);
		}

		.SimpleHistory-adminBarEventsList-item-content-meta {
			display: flex;
			flex: 1;
			align-items: center;
			// gap: var(--sh-dot-size);
		}

		.SimpleHistory-adminBarEventsList-item-content-meta strong {
			font-weight: normal;
		}

		.SimpleHistory-adminBarEventsList-item-content-message {
			margin-bottom: calc(var(--sh-dot-size) / 2);
			white-space: normal;

			p {
				line-height: 1.2;
			}
		}
	}

	// Add timeline-line.
	.SimpleHistory-adminBarEventsList-item::before {
		content: "";
		border-left: 1px solid var(--sh-line-color);
		top: var(--sh-dot-size);
		margin-bottom: calc(var(--sh-dot-size) * -2) !important;
	}

	.SimpleHistory-adminBarEventsList
		> li:last-child
		.SimpleHistory-adminBarEventsList-item::before {
		margin-bottom: 0 !important;
	}

	.SimpleHistory-adminBarEventsList-item:hover {
		background-color: #555555;
		// color: pink !important;
	}

	.SimpleHistory-adminBarEventsList-actions {
		background-color: #3c434a;
		display: flex;
		gap: 1rem;
		padding: 0.5rem;
		justify-content: space-between;

		.button {
			display: flex !important;
			gap: 0.25rem;
			align-items: center;
			background-color: transparent;
			border-color: transparent;
			color: rgba(240, 246, 252, 0.7);
		}

		.SimpleHistory-adminBarEventsList-actions-reload img {
			line-height: 1;
			width: 20px;
			height: 20px;
		}

		// .dashicons {
		// 	line-height: 1;
		// }

		// .dashicons::before {
		// 	font-family: dashicons;
		// 	line-height: 1;
		// }
	}
	.SimpleHistory-adminBarEventsList-actions-settings {
		flex: 1;
	}
}
