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

.email-management-main {
	margin: 50px;
}

.email-management {
	.empty-content__illustration {
		width: 250px;
		height: auto;
		margin: 20px 0 40px;
	}
}

/**
 * New email home styles
 */

.email-list-active {
	>.card {
		color: var(--color-text);
		display: flex;
	}

	>.card.is-card-link:hover {
		background-color: var(--color-neutral-0);
	}
}

.email-list-active__item-icon {
	align-self: center;

	>img,
	svg {
		display: block;
		height: 36px;
		margin-right: 16px;
		min-height: 36px;
		min-width: 36px;
		width: 36px;

		@include break-large {
			margin-right: 24px;
		}
	}

	>.gridicon.gridicons-my-sites {
		fill: var(--color-wordpress-com);
	}
}

.email-list-active__item-domain {
	h2 {
		word-break: break-all;
	}

	span {
		font-size: $font-body-small;
		color: var(--color-text-subtle);
	}
}

.email-list-active__warning {
	font-size: $font-body-small;
	margin-left: 14px;

	>span {
		display: none;
		vertical-align: middle;

		@include break-small {
			display: unset;
		}

		@include break-medium {
			display: none;
		}

		@include break-large {
			display: unset;
		}
	}

	>svg {
		height: 18px;
		margin-right: 6px;
		/* Push the icon down when there is no warning text */
		margin-top: 3px;
		vertical-align: middle;
		width: 18px;

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

		@include break-medium {
			margin-top: 3px;
		}

		@include break-large {
			margin-top: 0;
		}
	}

	&.error {
		>span {
			color: var(--color-error);
		}

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

	&.warning {
		>span {
			color: var(--color-warning);
		}

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

.email-list-inactive {
	margin-top: 15px;
}

.email-list-inactive__mailbox {
	align-items: center;
	display: flex;

	>span {
		flex: 1;
	}

	.button {
		flex-shrink: 0;
	}
}

.mailpoet-upsell {
	margin-top: -16px;
	margin-bottom: 37px;

	.banner__icons .banner__icon {
		display: none;
	}

	.banner__icons .banner__icon-no-circle {
		padding-right: 3px;

		img {
			height: 28px;
			width: 28px;
		}
	}

	.banner__content {
		flex: 1;
	}
}

@mixin email_plan_header_status_color($color ) {
	border-top: 5px solid $color;

	.email-plan-header__status {
		color: $color;

		>svg {
			fill: $color;
		}
	}
}

.email-plan-header__status {
	display: flex;
	align-items: center;

	>svg {
		margin-right: 5px;
	}
}

.email-plan-header.card.is-compact {
	align-items: center;
	display: flex;
	flex-wrap: wrap;

	h2 {
		font-size: $font-title-large;
		word-break: break-all;
	}

	&.success {
		@include email_plan_header_status_color(var(--color-success));
	}

	&.warning {
		@include email_plan_header_status_color(var(--color-warning));
	}

	&.error {
		@include email_plan_header_status_color(var(--color-error));
	}
}

.email-plan-header__icon {

	>img,
	svg {
		height: 36px;
		width: 36px;
		margin-right: 20px;
	}

	>.gridicon.gridicons-my-sites {
		fill: var(--color-wordpress-com);
	}
}

.email-mailbox-action-menu__main {
	position: absolute;
	right: 16px;
	top: 28px;

	@include break-mobile {
		right: 24px;
	}

	>.button.is-borderless {
		padding: 0;
	}
}

.email-mailbox-action-menu__remove-titan-mailbox-dialog {
	h3 {
		font-size: $font-title-medium;
		margin-bottom: 10px;
		font-weight: 600;
	}
}

.popover__menu-item.email-mailbox-action-menu__menu-item {
	align-items: center;
	display: flex;
	line-height: 24px;

	>img,
	>svg {
		margin-right: 8px;
	}

	&.is-selected,
	&:not(:disabled):hover,
	&:focus {
		>img {
			filter: grayscale(100%) brightness(0.2) invert(1);
		}

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

	&:disabled>svg {
		fill: currentColor;
	}

	&.external-link>.gridicons-external {
		display: none;
	}
}

.email-plan-mailboxes-list__mailbox-list {
	margin-top: 15px;
}

.email-plan-mailboxes-list__mailbox-list-item.card.is-compact {
	flex-direction: column;
	display: flex;
	padding-bottom: 28px;
	padding-top: 28px;

	@include break-xlarge {
		flex-direction: row;

		/* The padding jumps as we need the padding on this element instead
		 * of mailbox-list-item-main when we shift to flex-direction: row
		 */
		padding-right: 72px;
	}

	&.is-highlight {
		padding-left: 13px;

		@include break-mobile {
			padding-left: 21px;
		}
	}

	&.is-error {
		border-left-color: var(--color-error-50);
	}

	.email-plan-mailboxes-list__mailbox-list-item-main {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		padding-right: 40px;

		@include break-mobile {
			padding-right: 48px;
		}

		@include break-xlarge {
			/* Padding moves to parent mailbox-list-item when we shift to flex-direction: row */
			padding-right: 0;
		}
	}

	&.is-placeholder>span,
	&.is-placeholder .email-plan-mailboxes-list__mailbox-list-item-main {
		@include placeholder(--color-neutral-5);
		width: 50%;
	}

	&.no-emails>span {
		color: var(--color-text-subtle);
		font-style: italic;
	}

	.email-plan-mailboxes-list__mailbox-secondary-details {
		display: flex;
		gap: 10px;
		flex-grow: unset;
	}

	>.badge {
		align-self: center;
		/* Hide admin badge in mobile layouts */
		display: none;

		@include break-xlarge {
			display: unset;
			margin-left: 10px;
		}
	}
}

.email-plan-warnings__container {
	flex-basis: 100%;
	margin: 5px 0;
	width: 100%;

	.email-plan-warnings__warning,
	.email-plan-warning-notice__warning {
		padding-top: 24px;

		.email-plan-warnings__cta,
		.email-plan-warning-notice__cta {
			margin-top: 16px;

			.button {
				font-size: $font-body-small;

				.gridicon {
					height: 16px;
					margin-left: 8px;
					top: 3px;
					width: 16px;
				}
			}
		}
	}
}

.is-section-email {
	.empty-content {
		.empty-content__illustration {
			margin-top: 100px;
		}

		.empty-content__title,
		.empty-content__line {
			margin-top: 32px;
		}

		.empty-content__action {
			margin-right: 8px;
			margin-left: 8px;
			margin-bottom: 16px;
		}
	}
}

/**
 * Context: All Domain Management
 */
.wpcom-site .hosting-dashboard-layout.sites-dashboard .hosting-dashboard-item-view__content .context-all-domain-management,
/* For Domain and Email related pages under site context. */
.context-all-domain-management {
	&.main {
		margin: 0 auto;
		width: 100%;

		header.domains-email__navigation-header.navigation-header {
			border: 0;
			padding: 1.5rem;

			@include break-medium {
				padding: 0 0 1.5rem 0;
			}

			@include break-large {
				padding-bottom: 2rem;
			}

			.navigation-header__main {
				padding-inline: 0;

				.navigation-header__actions {
					flex-grow: 0;
				}
			}
		}
	}

	/* Mailboxes */
	.email-plan-mailboxes-list {
		&__mailbox-list {
			margin-top: 0;
			padding-bottom: 1.875rem;

			@include break-medium {
				border: solid 1px var(--color-border-subtle);
				border-radius: 4px;
			}

			.card {
				box-shadow: none;
				background: none;
			}

			.card.section-header {
				margin: 0 1.5rem;
				padding: 1.75rem 0 1.25em 0;
				align-items: center;
			}

			.section-header__label-text {
				display: flex;
				align-items: center;
				font-size: 1rem;
				color: var(--studio-gray-100);
			}

			.section-header__actions {
				flex: none;

				.components-button {
					font-size: 0.875rem;
				}

				.components-button.is-link {
					text-decoration: none;
				}
			}

			&-item.card.is-compact {
				border-top: solid 1px var(--color-border-subtle);
				margin: 0 1.5rem;
				padding: 1.375rem 0;

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

			.email-mailbox-action-menu__main {
				right: 0;
				top: 18px;
			}
		}

		&__mailbox-header-icon {
			display: flex;
			margin-inline-end: 0.5rem;
			width: 24px;

			img {
				height: 24px;
			}

			svg {
				height: 24px;
				fill: var(--color-accent);
			}

			// The my-sites SVG has a bit of extra padding on the sides, so we need to adjust the position.
			.gridicon.gridicons-my-sites {
				margin-left: -3px;
			}
		}

		&__notice {
			margin-top: 1rem;
			margin-bottom: 2rem;

			.email-plan-warnings__container {
				margin: 0;
			}

			.email-plan-warnings__warning {
				display: flex;
				padding: 0;

				.email-plan-warnings__message,
				.email-plan-warnings__cta {
					display: inline;
				}

				.email-plan-warnings__message {
					span {
						display: inline-block;
						max-width: 700px;
					}
				}

				.email-plan-warnings__cta {
					margin: 0;
					flex-grow: 0;
					align-self: center;
					white-space: nowrap;

					svg {
						height: 14px;
						vertical-align: middle;
					}

					a {
						color: var(--studio-gray-20);
						text-decoration: none;
					}
				}
			}
		}
	}

	.email-plan-mailboxes-list__mailbox-list-item>.badge {
		flex: none;
	}

	div.email-plan-mailboxes-list__mailbox-list-link span.disabled,
	.section-header__actions button[disabled] {
		color: var(--theme-highlight-color-50);
		opacity: 0.5;
	}
}

.email-plan-mailboxes-list__email-upgrade-notice {
	margin-top: 1rem;
	box-shadow: 0 0 0 1px var(--color-border-subtle);

	.components-notice__content {
		display: flex;
		margin-left: 0.25rem;
		margin-right: 0.75rem;
		align-items: center;
	}

	p {
		margin: 0;
		font-size: 0.75rem;
		color: var(--studio-gray-70);
	}

	.icon {
		svg {
			fill: #fff;
			padding: 4px;
			border-radius: 100%;
			background: var(--color-accent-60);
		}
	}

	.content {
		flex: 1 1 auto;
		margin: 0 0.75rem;
	}
}
