@import "../plugin-scheduled-updates-common/styles";


.tooltip--selected-plugins {
	text-align: left;
}

.plugins-update-manager {
	&.components-card {
		margin-bottom: 1rem;
	}

	.ch-placeholder {
		min-width: 60px;
		min-height: 2.25rem;
	}

	.components-text {
		color: var(--studio-gray-60);
		font-size: 0.875rem;

		&.validation-msg,
		&.info-msg {
			display: block;
			min-height: 1rem;
			font-size: 0.75rem;
			margin-bottom: 0.5rem;
		}

		&.validation-msg {
			color: var(--studio-red-50);

			svg {
				fill: var(--studio-red-50);
				margin-left: 0;
			}
		}
	}

	p.components-text {
		margin-bottom: 0.5rem;
	}

	.placeholder-info {
		max-width: 510px;
		margin: 3rem auto;
		color: var(--studio-gray-100);
		text-align: center;
		font-weight: 500;
		font-size: 1rem;
	}

	.components-spinner {
		display: block;
		margin: 3rem auto;
	}

	svg.icon-info {
		fill: var(--studio-gray-60);
		vertical-align: middle;
		margin: -2px 0 0 4px;
	}

	.plugin-select-stats {
		float: right;
		margin-top: 2px;
		font-size: 0.875rem;
		font-weight: 500;
	}

	button.schedule-name {
		font-size: 0.875rem;
		font-weight: 500;
		text-decoration: none;
		color: var(--studio-gray-100);
	}

	button.schedule-last-run {
		font-size: 0.875rem;
		text-decoration: none;
		color: var(--studio-gray-60);
	}

	.components-form-toggle {
		.components-form-toggle__track {
			border-color: var(--color-text) !important;
		}

		&.is-checked {
			.components-form-toggle__track {
				background-color: var(--color-text) !important;
			}

			.components-form-toggle__thumb {
				background-color: #fff !important;
			}
		}

	}

	table {
		td {
			vertical-align: middle;

			.badge-component {
				line-height: 2;
			}
		}
	}

	.schedule-list--card {
		margin-bottom: 1rem;
		border-bottom: solid 1px var(--studio-gray-5);
		position: relative;
	}

	.schedule-list--card-actions {
		position: absolute;
		top: 0;
		right: -10px;

		svg {
			transform: rotate(90deg);
		}
	}

	.schedule-list--card-label {
		font-size: 0.875rem;
		margin-bottom: 0.75rem;

		label {
			display: block;
			color: var(--studio-gray-40);
		}

		strong {
			font-weight: 500;
		}

		.badge-component {
			margin-inline-start: 0.5rem;
		}

		.components-form-toggle {
			margin-top: 0.125rem;
		}
	}

	.validation-msg {
		width: 100%;
	}

	.notification-settings__title {
		font-size: $font-body;
	}

	.timeline {
		margin: 0;

		.timeline-event {
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			box-shadow: none;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			&.indent {
				margin-left: 3rem;
			}

			&.is-disabled {
				background: var(--studio-gray-0);

				.timeline-event__icon {
					background-color: var(--studio-gray-40) !important;

					svg {
						fill: var(--studio-white) !important;
					}
				}
			}

			.timeline-event__icon-wrapper {
				align-content: center;

				&::before {
					display: none;
				}
			}

			.timeline-event__action-button-wrapper {
				align-self: center;
			}

			.timeline-event__title {
				font-size: 0.75rem;
				color: var(--studio-gray-50);
			}

			.timeline-event__detail {
				font-weight: 500;
				font-size: 0.875rem;
				color: var(--studio-gray-100);
			}
		}

		.timeline-event__icon {
			width: 40px !important;
			height: 20px !important;
			border-radius: 4px !important;

			svg {
				width: 14px;
				height: 14px;
			}

			&.success {
				background-color: var(--color-success-5) !important;

				svg {
					fill: var(--color-success-80);
				}
			}

			&.warning {
				background-color: var(--color-warning-5) !important;

				svg {
					fill: var(--color-warning-80);
				}
			}

			&.error {
				background-color: var(--color-error-5) !important;

				svg {
					fill: var(--color-error-80);
				}
			}
		}
	}
}

.plugins-update-manager-spinner {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
