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

body.is-section-mailboxes.theme-default.color-scheme {
	--color-surface-backdrop: var(--studio-white);
}

.mailbox-selection-list__loader-error-container {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: 90vh;

	section {
		align-items: center;
		display: flex;
		flex-direction: column;

		img {
			width: 153px;

			@include break-medium {
				width: 194px;
			}
		}

		.formatted-header {
			margin-top: 25px;
			margin-bottom: 15px;

			@include break-medium {
				margin-bottom: 32px;
			}

			.formatted-header__title {
				font-size: $font-title-large;
				margin-bottom: 10px;

				@include break-medium {
					font-size: $font-headline-medium;
				}
			}

			.formatted-header__subtitle {
				color: var(--color-text-subtle);
				font-size: $font-body;
				margin-bottom: 0;

				@include break-medium {
					max-width: 505px;
				}
			}
		}

		footer {
			align-items: center;
			display: flex;
			flex-direction: column;

			button {
				margin-bottom: 10px;
			}
		}
	}
}

.mailbox-selection-list__status {
	align-items: center;
	display: flex;
	font-size: $font-title-small;
	justify-content: center;
	margin-top: 35vh;

	.mailbox-selection-list__status-content {
		line-height: 40px;
	}

	.mailbox-selection-list__status-text {
		align-self: normal;
	}

	.gridicon {
		height: 40px;
		margin-right: 14px;
		width: 40px;
	}

	.gridicons-cross-circle {
		color: #bdb5b5;
	}

	@include break-large {
		font-size: $font-title-medium;
		transform: none;
	}
}

.mailbox-selection-list__container {
	@include break-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mailbox-selection-list {
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;

		@include break-mobile {
			padding-left: 0;
			padding-right: 0;
			max-width: 80%;
		}

		@include break-large {
			width: 660px;
		}

		.mailbox-selection-list__header {
			.formatted-header__title {
				font-size: $font-title-large;
				line-height: $font-headline-medium;

				@include break-large {
					font-size: $font-headline-medium;
				}
			}

			.formatted-header__subtitle {
				font-size: $font-body;
				line-height: $font-title-medium;
			}
		}

		.mailbox-selection-list__item {
			align-items: center;
			border-color: var(--p2-color-border-light);
			border-style: solid;
			border-width: 1px 0 0;
			box-shadow: none;
			display: flex;
			margin-bottom: 1px;
			padding: 12px;
			height: 85px;

			.gridicons-external {
				width: 20px;
			}

			&:first-of-type {
				border-top-width: 0;
				margin-top: 50px;
			}

			.mailbox-selection-list__mailbox {
				margin: 0 30px 0 0;
				padding: 0;

				h2 {
					color: var(--studio-wordpress-blue-100);
					font-family: $sans;
					font-size: $font-body;
					font-weight: 600;
					word-break: break-all;
				}
			}
		}

		.mailbox-selection-list__icon {
			align-self: center;
			height: 36px;
			margin-right: 16px;
			min-width: 36px;
			width: 36px;

			.mailbox-selection-list__icon-circle {
				align-items: center;
				background: #3197a7;
				border-radius: 999px; /* stylelint-disable-line scales/radii */
				color: var(--studio-white);
				display: flex;
				font-size: $font-title-small;
				font-weight: bold;
				height: 100%;
				justify-content: center;
				text-align: center;
				text-transform: capitalize;
				width: 100%;
			}

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

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