@import "@automattic/color-studio/dist/color-variables";
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

.domains-overview.main .subpage-wrapper,
.domains-overview.main .site-preview-pane.domains-overview__details {
	display: flex;
	flex-direction: column;
	height: 100%;

	.navigation-header__actions, .foldable-card__action {
		flex-grow: initial;
	}

	.form-text-input-with-affixes .form-text-input {
		border-radius: 2px 0 0 2px;
	}

	.subpage-wrapper__header.navigation-header {
		padding: 24px;
		border-block-end: 1px solid var(--color-border-secondary);

		@include break-medium {
			padding: 24px 48px;
		}

		.navigation-header__main {
			padding: 0;
			flex-direction: column;

			.breadcrumbs {
				padding-bottom: 24px;
			}
		}
	}

	.subpage-wrapper__content {
		padding: 24px;
		overflow: auto;

		@include break-medium {
			padding: 32px 48px 48px;
		}
	}

	.email-forwards-add,
	.edit-contact-info-page {
		.button {
			padding: 10px 24px;
			border-radius: 4px;
		}
	}

	.email-forwards-add {
		.card {
			border-radius: 4px;
		}

		.card-heading {
			font-size: 1rem;
			font-weight: 500;
			line-height: 24px;
			margin-top: 0;
			margin-bottom: 16px;
		}
	}

	.edit-contact-info-page {
		.card,
		.edit-contact-info-page__sidebar {
			border-radius: 4px;
		}

		.contact-details-form-fields {
			padding: 0;
		}

		.contact-details-form-fields__submit-button {
			margin-right: 16px;
		}
	}

	.dns-records {
		.card.email-setup,
		.dns-records-list {
			border: solid 1px $studio-gray-5;
			border-radius: 4px;
			box-shadow: none;
		}

		.dns-records-list {
			margin-top: 32px;

			.dns-records-list-item__wrapper.is-header {
				border-bottom-color: $studio-gray-10;
			}

			.dns-records-list-item__wrapper {
				padding: 16px 30px 16px 36px;

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

			.dns-records-list-item .dns-records-list-item__menu {
				.ellipsis-menu__toggle {
					right: unset;
				}
			}
		}

		.button.ellipsis {
			width: 24px;
		}
	}

	.domain__main-placeholder {
		.vertical-nav {
			background-color: $studio-white;
			border: solid 1px $studio-gray-5;
			border-radius: 4px;
			margin-top: 32px;
		}

		.card {
			background-color: transparent;
			border-bottom: solid 1px $studio-gray-5;
			box-shadow: none;

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

	.domain__main-placeholder,
	.dns-records,
	.add-dns-record {
		.navigation-header {
			border-block-end: none !important;
			padding-top: 0 !important;
			padding-bottom: 0;

			.navigation-header__main {
				padding-inline: 0 !important;
			}
		}
	}

	.add-dns-record {
		grid-gap: 2rem;

		&__main {
			border: solid 1px $studio-gray-5;
			padding: 1.5rem;
		}

		&__main,
		&__sidebar > div {
			border-radius: 4px;
		}
	}

	.email-providers-in-depth-comparison__table {
		border: solid 1px $studio-gray-5;
		border-radius: 4px;
		padding: 24px;

		> table {
			margin-top: 0;

			td {
				padding-top: 12px;
			}
		}

		@media ( max-width: $break-small ) {
			padding: 8px;
		}
	}

	&.subpage-wrapper--add-mailbox {
		.card-heading.new-mailbox-list__numbered-heading,
		.section-header__label {
			color: $studio-gray-100;
			font-size: 1rem;
			font-weight: 500;
			margin-bottom: 1rem;
		}

		.card.new-mailbox {
			border-radius: 4px;
		}

		.new-mailbox-list__separator {
			margin-inline: -24px;
			background: $studio-gray-5;
		}

		.vertical-nav {
			.card.is-placeholder:first-child {
				border-radius: 4px 4px 0 0;
			}

			.card.is-placeholder:last-child {
				border-radius: 0 0 4px 4px;
			}
		}
	}

	&.subpage-wrapper--transfer-other-site {
		.transfer-domain-to-other-site__card > p {
			font-size: 1.25rem;
			margin-bottom: 1.25rem;

			strong {
				font-weight: 500;
			}
		}

		.domain__main-placeholder {
			max-width: $break-xlarge;
		}
	}
}

.is-bulk-all-domains-page .layout__content .main,
.is-domain-in-site-context .layout__content .main {
	.navigation-header {
		&__breadcrumb,
		&__title {
			border-block-end: none;
		}

		&__breadcrumb {
			padding-top: 22px;

			@media ( max-width: $break-medium ) {
				padding-top: 16px;

				.breadcrumbs li {
					&.navigation-header__domain-name {
						> a,
						> span {
							word-break: break-word;
							overflow-wrap: break-word;
							white-space: normal;
						}
					}

					> .gridicons-chevron-right {
						margin: 0 8px;
					}
				}
			}
		}

		&__title {
			padding-bottom: 0;
			padding-top: 32px;

			.navigation-header__main {
				max-width: calc(1040px + 92px) !important;
				margin: 0 auto;
			}

			@media ( max-width: $break-medium ) {
				padding-top: 24px;

				.navigation-header__main {
					padding-inline: 24px !important;
				}
			}
		}
	}
}
