@import '../../client/css/defaults';

.module-sync-dialog {
	min-width: 23em;

	.repository--module-icon--image {
		width: 1.5em;
		height: 1.75em;
		display: block;
	}

	.module-title {
		display: block;
		font-size: 0.625em;
		font-weight: bold;
		color: black;
		margin: 0;
		max-width: calc(100% - 8.5em);
		word-break: break-word;
	}

	.top-bar {
		text-align: left;
		position: relative;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		height: 3em;

		.repository--module-icon--image {
			position: absolute;
			left: 0.75em;
			top: 50%;
			transform: translate(0, -50%);
		}

		.module-title {
			position: absolute;
			left: 4.5em;
			top: 50%;
			transform: translate(0, -50%);
			max-height: 1.2em;
		}

		.close-button {
			position: absolute;
			right: 0.5em;
			top: 50%;
			transform: translate(0, -50%);
		}
	}

	.wrapper {
		padding: 0 1.25em;

		.title {
			font-weight: 700;
			font-size: 1.3em;
			margin-bottom: 0.2em;
			text-align: center;
		}

		.sub-title {
			font-size: 0.7em;
			margin-bottom: 0.5em;
			text-align: left;
		}

		.sync-info-wrapper {
			background-color: $color-banner-bg;
			margin: 1.25em 0;
			padding: 1em;

			.sync-info {
				display: flex;
				align-items: center;

				.module-title {
					flex-grow: 1;
					margin-left: 1em;

					.last-update-time {
						font-size: 0.65em;
					}
				}
			}

			.sync-info-text-only {
				display: block;
				width: 100%;
				text-align: center;
			}
		}
	}
}