@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

body:not(.is-global).edit__body-white.theme-default.color-scheme {
	--color-surface-backdrop: var(--studio-white);
}

.settings-header__children {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.settings-header {
	&__container {
		&-title {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin: 0;
			column-gap: 16px;

			// Higher specificity needed to override .formatted-header.is-left-align media-query styles
			header.settings-header__title {
				margin: 8px 0;
				text-transform: lowercase;
			}
		}

		&-badges {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px;

			// Higher specificity needed to override .badge styles
			div.settings-header__badge {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				font-size: $font-body-extra-small;
				border-radius: 4px;
				font-weight: 500;

				.settings-header__badge-indicator {
					display: flex;
					height: 8px;

					svg {
						margin-right: 8px;
					}
				}

				svg {
					margin-right: 4px;
				}

				&--success {
					background: rgba(184, 230, 191, 0.6);
					color: var(--studio-green-80);

					svg {
						fill: var(--studio-green-80);
					}

					.settings-header__badge-indicator svg {
						fill: var(--studio-green-50);
					}
				}

				&--warning {
					background: var(--studio-orange-0);
					color: var(--studio-yellow-80);

					svg {
						fill: var(--studio-orange-40);
					}
				}

				&--premium {
					background: var(--studio-yellow-10);
					color: var(--studio-yellow-80);

					svg {
						fill: var(--studio-yellow-80);
						margin-right: 0;
						margin-left: 4px;
					}
				}

				&--neutral {
					background: rgba(220, 220, 222, 0.6);
					color: var(--studio-gray-80);

					svg {
						fill: var(--studio-gray-80);
					}
				}
			}
		}
	}

	&__domain-notice {
		flex-basis: 100%;
		background-color: var(--studio-gray-0);
		display: flex;
		align-items: center;
		padding: 5px;
		margin: 12px 0 0;
		gap: 8px;
		border-radius: 2px;

		@include break-mobile {
			margin: 8px 0 0;
		}
	}

	&__domain-notice-icon.gridicon {
		align-self: flex-start;
		min-width: 18px;
		position: relative;
		top: 2px;
		fill: var(--studio-green-50);

		&--error {
			fill: var(--studio-orange-40);
		}
	}

	&__domain-notice-icon--rotated {
		transform: rotate(180deg);
	}

	&__domain-notice-message {
		font-weight: 400;
		font-size: $font-body-small;
		color: var(--studio-gray-80);

		button.button-plain {
			cursor: pointer;
			color: var(--color-link);

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

	&__domain-notice-dismiss-button {
		margin-left: auto;
		width: 18px;
		height: 18px;
		color: var(--color-text-subtle);
		cursor: pointer;

		@include break-small {
			width: 24px;
			height: 24px;
		}
	}
}

.domain-settings-page {
	.name-servers-card__loading {
		@include placeholder();
		display: block;
		margin-top: 4px;
		margin-bottom: 0;
	}

	.set-as-primary__notice {
		flex-basis: 100%;
		background-color: var(--studio-gray-0);
		display: flex;
		align-items: center;
		padding: 5px;
		margin-top: 12px;
		margin-bottom: 24px;
		gap: 8px;
		border-radius: 2px;

		.set-as-primary__notice-icon.gridicon {
			align-self: flex-start;
			min-width: 18px;
			fill: var(--studio-orange-40);
			transform: rotate(180deg);
			position: relative;
		}

		.set-as-primary__notice-message {
			font-weight: 400;
			font-size: $font-body-small;
			color: var(--studio-gray-80);
		}
	}
}

.is-mobile-app-view {
	&.is-section-domains .focus-content:not(.has-no-sidebar) .layout__content {
		padding-top: 0;
	}
	.domain-settings-page {
		.navigation-header,
		.breadcrumbs-back {
			display: none;
		}
	}
}
