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

.site-settings {
	$margin-bottom-setting-label: 5px;

	font-size: $font-body-small;

	fieldset.form-fieldset {
		clear: both;
		margin-bottom: 24px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	label {
		display: block;
	}

	input {
		display: inline-block;
	}

	.short-settings {
		display: block;
		min-width: 200px;
	}

	select + label {
		margin-top: 24px; // Give labels some margin when they immediately follow a select
	}

	input[type="number"].form-text-input {
		padding: 0;
		width: 50px;
		text-align: center;
	}

	input[type="text"].form-text-input {
		-webkit-appearance: none;
	}

	legend,
	label {
		margin-bottom: $margin-bottom-setting-label;
		font-size: $font-body-small;
		font-weight: 700;
	}

	// Addressing an issue of inconsistent spacing bettwen setting label's and the following block: https://github.com/Automattic/wp-calypso/issues/72721
	label.reduce-margin-bottom-fix {
		margin-bottom: $margin-bottom-setting-label - 3px;
	}

	// Addressing an issue of inconsistent spacing bettwen setting label's and the following block: https://github.com/Automattic/wp-calypso/issues/72721
	label.increase-margin-bottom-fix {
		margin-bottom: $margin-bottom-setting-label + 2px;
	}

	.components-toggle-control__label {
		margin-bottom: 1px;
	}

	legend + label,
	label + label,
	li label,
	input[type="checkbox"] + label,
	input[type="radio"] + label,
	label input[type="checkbox"],
	label input[type="radio"],
	.components-toggle-control__label {
		font-weight: 400;
	}

	label a,
	p a {
		text-decoration: underline;
	}

	p:last-child {
		margin-bottom: 0;
	}

	.is-primary {
		float: right;
	}

	.empty-content {
		.is-primary {
			float: none;
		}
	}

	p.form-setting-explanation {
		display: block;
		margin: 5px 0;
		font-size: $font-body-small;
		font-style: italic;
		font-weight: 400;
		color: var(--color-text-subtle);

		&.is-indented {
			margin-left: 48px;
		}
	}

	.indented-form-field,
	.indented-form-field + p.form-setting-explanation.is-indented {
		margin-left: 48px;
	}

	p.settings-alert {
		font-weight: 400;
		color: var(--color-error);
	}

	ul li,
	ol li {
		margin-bottom: 0;
	}

	.analytics-settings {
		padding-top: 20px;

		.form-setting-explanation {
			a {
				margin-left: 6px;
			}
		}
	}

	.site-settings__analytics-stores-settings {
		padding-bottom: 20px;

		.site-settings__analytics-stores-child-settings {
			margin-top: 10px;
			margin-left: 20px;
		}
	}

	.site-settings__blogaddress-settings {
		@include breakpoint-deprecated( ">660px" ) {
			display: flex;
		}

		.button {
			width: 100%;
			margin-left: 0;
			margin-top: 5px;
			text-align: center;

			@include breakpoint-deprecated( ">660px" ) {
				width: 45%;
				margin-left: 16px;
				margin-top: 0;
			}
		}
	}

	.seo-settings__seo-form .form-text-input-with-affixes__prefix {
		min-width: 80px;
		text-align: center;
	}

	.seo-settings__seo-sitemap {
		word-wrap: break-word;
		word-break: break-word;
	}

	.verification-code-error {
		color: var(--color-error);
		font-weight: 700;
	}

	.seo-settings__seo-form .counted-textarea {
		&.is-exceeding-acceptable-length {
			background: var(--color-warning);
		}
	}

	.seo-settings__seo-form .seo-settings__preview-button {
		display: block;
		float: left;
		margin-right: 24px;
	}

	.seo-settings__seo-form .seo-settings__preview-explanation {
		display: block;
		float: left;
		line-height: 40px;
	}

	.seo-settings__front-page-description {
		margin-bottom: 1.5em;
	}

	fieldset.form-fieldset.site-icon-setting {
		padding-bottom: 16px;

		@include breakpoint-deprecated( ">660px" ) {
			flex: 0 0 122px;
			order: 1;
			margin-bottom: 0;
			padding-right: 24px;
			padding-bottom: 24px;
		}
	}

	.site-icon-setting__heading {
		@include breakpoint-deprecated( ">660px" ) {
			justify-content: normal;
			white-space: nowrap;
		}

		.info-popover {
			margin-left: 6px;
		}
	}

	.site-icon-setting__icon {
		@include breakpoint-deprecated( "<660px" ) {
			float: left;
			margin-right: 8px;
		}
	}

	.site-icon-setting__button {
		@include breakpoint-deprecated( "<660px" ) {
			display: block;
			margin-bottom: 8px;
		}
	}

	.card {
		&.is-placeholder div {
			@include placeholder();
		}
	}

	.site.is-compact .site__content {
		padding: 0;
	}

	.eligibility-warnings {
		margin-top: 0;
		margin-bottom: 16px;

		.is-primary {
			float: none;
		}
	}
}

.site-settings__analytics-settings,
.site-settings__general-settings,
.site-settings__performance-settings,
.site-settings__writing-settings,
.site-settings__traffic-settings,
.site-settings__security-settings,
.manage-connection,
.seo-settings__site-verification,
.seo-settings__help {
	hr {
		margin: 0 -24px 1.5em;
	}
}

.site-settings__general-settings .is-coming-soon-disabled {
	opacity: 0.5;
}

.site-settings__general-settings .site-settings__language-picker-notice {
	margin-bottom: 10px;
}

.site-settings__discussion-settings {
	hr {
		margin: 0 -24px 1.5em;
	}

	.site-settings__other-comment-settings {
		.form-select {
			margin: -3px 4px;
		}
	}

	.site-settings__moderation-settings {
		.form-label {
			font-weight: 400;
		}
	}

	.site-settings__tooltip-container {
		display: flex;
		justify-content: space-between;
	}
}

.site-settings__site-options {
	border-bottom: 1px var(--color-neutral-0) solid;
	border-width: 1px 0;
	padding-bottom: 10px;
	@include breakpoint-deprecated( ">660px" ) {
		display: flex;
	}

	&:last-child {
		.site-icon-setting {
			padding-bottom: 0;
		}
	}
}

.site-settings__fiverr-logo-maker-cta {
	margin-top: 10px;
	margin-bottom: 20px;

	@include break-small {
		display: flex;
		align-items: center;
	}
}

.site-settings__fiverr-logo-icon {
	width: 32px;
	height: 32px;
	padding-right: 15px;
	margin-bottom: 10px;

	@include break-small {
		margin-bottom: 0;
	}
}

.site-settings__fiverr-logo-maker-cta-text-title {
	line-height: 17.9px;
	font-weight: 600;
	font-size: $font-body-small;
	margin-bottom: 5px;
}

.site-settings__fiverr-logo-maker-cta-text-subhead {
	line-height: 15.51px;
	font-weight: 400;
	font-size: $font-body-small;
	margin-top: 5px;
}

.site-settings__fiver-cta-button {
	width: 195px;
	height: 40px;
	text-align: center;
	margin-top: 10px;

	@include break-small {
		margin-left: auto;
		margin-top: 0;
	}

	svg {
		margin-right: 6px;
	}
}

.site-settings__site-title-tagline {
	@include breakpoint-deprecated( ">660px" ) {
		flex: 0 1 100%;
		order: 2;
	}
}

.site-settings__footer-credit-container {
	margin-bottom: 16px;
}

.site-settings__footer-credit-nudge.card.upgrade-nudge {
	margin: 0;
}

.site-settings__footer-credit-change {
	width: 175px;
	text-align: center;
	margin-left: 24px;
}

.site-settings__footer-credit-explanation {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.site-settings__footer-credit-explanation p {
	margin: 0;
}

.writing-settings,
.general-settings {
	@include breakpoint-deprecated( "<660px" ) {
		select {
			width: 100%;
		}
	}
}

.jetpack-protect__deactivate,
.jetpack-protect__edit-settings {
	margin-right: 8px;
}

// @TODO: Remove has-divider once all instances have been replaced with .site-settings__has-divider
.has-divider,
.site-settings__has-divider,
.form-fieldset.has-divider,
.form-fieldset.site-settings__has-divider {
	margin: 0 -24px;
	padding: 24px 24px 16px;
	border: 1px var(--color-neutral-0) solid;
	border-width: 1px 0;

	&.is-top-only {
		border-bottom: 0;
		padding-bottom: 0;
	}

	&.is-bottom-only {
		border-top: 0;
		padding-top: 0;
	}
}

.site-settings__taxonomies {
	margin-bottom: 17px;
}

.site-settings__foldable-card {
	&.foldable-card,
	&.foldable-card.is-expanded {
		margin-bottom: 16px;
	}

	.foldable-card__header {
		padding: 24px;

		.gridicons-checkmark,
		.gridicons-notice-outline {
			margin-right: 4px;
			vertical-align: bottom;
		}

		.gridicons-checkmark {
			color: var(--color-success);
		}

		.gridicons-notice-outline {
			color: var(--color-error);
		}
	}

	.foldable-card__expand {
		width: 64px;
	}

	&.is-expanded .foldable-card__content {
		padding: 8px 24px 24px;
		border-top: 1px var(--color-neutral-10) solid;
	}

	&.is-expanded.is-top-level .foldable-card__content {
		padding: 24px;
	}

	.composing__module-settings .support-info,
	.protect__module-settings .support-info,
	.spam-filtering__settings .support-info {
		margin-right: -36px;
		height: 0;
	}
}

// Site settings group styles
.site-settings__module-settings {
	.form-label {
		&.is-disabled {
			opacity: 0.3;
		}
	}
}

.site-settings__child-settings {
	margin: 16px 48px 0;
}

.form-legend + .support-info {
	margin-top: -21px;
}

.site-settings__add-to-explicitly-allowed-list {
	margin-top: 3px;
}

.site-settings__card + .site-settings__card,
.site-settings__foldable-card + .site-settings__card,
.site-settings__foldable-card + .card.is-compact:last-child,
.site-settings__card + .card.is-compact:last-child {
	margin-top: -16px;
	margin-bottom: 16px;
}

.site-settings__general-jetpack {
	margin-bottom: 16px;
}

.site-settings__placeholder-item {
	@include placeholder();

	& + & {
		margin-top: 24px;
	}
}

button.site-settings__general-settings-set-guessed-timezone.button.is-borderless.is-compact {
	padding: 0;
	line-height: inherit;
	font-size: inherit;

	text-decoration: underline;
	color: var(--color-link);
	font-style: inherit;
	font-weight: 400;

	&:hover,
	&:focus,
	&:active {
		color: var(--color-link-dark);
		box-shadow: none;
	}
}

.site-settings .site-settings__wordpress-version {
	display: inline;
}

.site-settings__jetpack-dev-mode-notice .calypso-notice {
	animation: none;
}

.site-settings__videopress-storage {
	.plan-storage__bar {
		margin-top: 24px;
	}

	// Necessary additional specificity
	.site-settings__videopress-storage-used.form-setting-explanation {
		margin-left: 36px;
	}
}

.site-settings__search-block {
	margin-bottom: 16px;

	.site-settings__jetpack-instant-search-toggle {
		margin-left: 48px;
	}

	.search__module-settings {
		margin-top: 0;
		&:not(:last-child) {
			margin-bottom: 1em;
		}
	}
}

.site-settings__speed-up-site-settings {
	p.site-settings__feature-description {
		margin-top: 0;
		margin-bottom: 1.5em;
	}
}

.site-settings__disable-privacy-settings {
	opacity: 0.33;
	pointer-events: none;
}

.site-settings__writing-settings {
	.theme-enhancements__card {
		.form-fieldset.minileven {
			&.inactive {
				p,
				.components-toggle-control__label,
				.support-info {
					opacity: 0.3;
					transition: all 0.75s;
				}
			}
		}
	}
}

.site-settings__page-optimize {
	margin-top: -16px;
	margin-bottom: 16px;
}

.site-settings__gifting-container,
.site-settings__a4a-fully-managed-container {
	margin-bottom: 16px;
	p {
		font-style: italic;
	}
	.inline-support-link {
		padding-left: 5px;
	}
}

.site-settings__emails-text-settings-container {
	legend {
		font-weight: 400;
		margin-bottom: 0;
	}
	legend + label {
		font-weight: 700;
	}
	label {
		margin-top: 24px;
	}
}

.site-settings__reading-settings {
	.site-settings__your-homepage-display-container fieldset {
		min-width: 0;

		select {
			max-width: 100%;
		}
	}

	.select-homepage-setting {
		margin-bottom: 12px;
	}

	.default-posts-page-setting {
		margin-bottom: 12px;
	}

	.learn-more-link {
		white-space: nowrap;
	}
}

.site-settings__built-by-upsell {
	&.banner.card {
		padding-inline-end: 24px;
	}
	.banner__icon-no-circle {
		.wordpress-logo {
			fill: var(--color-neutral-100);
			margin: 0;
		}
	}
	.banner__action {
		margin-inline-end: 0;
	}
}

.site-settings__reset-site-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.form-label.reset-site__confirm-label {
	margin-bottom: 8px;
	line-height: 24px;
	color: var(--color-text-subtle);
	font-weight: normal;
}

.site-settings__reset-site {
	.card.header-cake {
		margin-bottom: 0;
		border-bottom: none;
	}
	.card.action-panel {
		margin-bottom: 0;
		padding: 24px;
		.action-panel__body ul {
			margin-left: 20px;
			margin-bottom: 0;
		}
	}

	.action-panel__footer::before {
		height: 0 !important;
	}

	.site-settings__reset-site-backup-hint a,
	a.inline-support-link,
	.action-panel__body a,
	li a {
		text-decoration: underline !important;
	}

	.banner {
		margin-top: 16px;
	}

	.reset-site__in-progress-message {
		color: var(--gray-gray-100, #101517);
		margin-top: 8px;
	}

	.loading-bar {
		&::before {
			background: var(--color-accent);
		}
	}
}

.site-settings__reset-site-backup-hint {
	margin-top: 8px;
	margin-bottom: 0;
	color: var(--color-text-subtle);
	font-size: $font-body-small;
	font-style: italic;
}

.support-info + .jetpack-module-toggle,
.support-info + .components-toggle-control,
.support-info + .custom-content-types__module-settings,
.support-info + .verbum-comments-toggle {
	display: flex;
}

.jetpack-module-toggle,
.verbum-comments-toggle {
	flex-direction: column;
}

.site-settings__firewall-settings .card:not(:last-child) {
	margin-bottom: 0;
}

.site-settings__security-settings-firewall-nudge {
	margin-bottom: 0;
	z-index: 1;
}
