@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.jetpack-staging-sites-management {
	box-sizing: border-box;
	margin: auto;
	max-width: 720px;
	margin-left: -16px;
	margin-right: -16px;

	@include break-medium {
		margin-left: auto;
		margin-right: auto;
	}

	h3 {
		font-size: $font-body;
	}
}

.jetpack-staging-sites-management .staging-icon {
	svg {
		background: var(--studio-yellow-20);
		vertical-align: middle;
		border-radius: 4px;
	}
}

.jetpack-staging-sites-management .setting-title {
	align-items: center;
	column-gap: 8px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.jetpack-staging-sites-management .setting-content {
	padding-top: 28px;
}

.jetpack-staging-sites-management .setting-content .setting-option {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;

	.setting-option__toggle label {
		font-size: 0.875rem;
	}
}

.components-form-toggle.is-checked .components-form-toggle__track {
	background-color: var(--studio-jetpack-green-50);
}
