@import '@automattic/typography/styles/variables';
@import '@wordpress/base-styles/breakpoints';
@import '@automattic/typography/styles/fonts';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/colors';

.breadcrumbs {
	svg.options-domain-button__add.gridicon {
		margin-left: 2px;
		margin-right: 2px;

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

	button.options-domain-button.ellipsis {
		padding: 4px 0;
	}

	svg.options-domain-button__ellipsis {
		width: 28px;
		height: 28px;
		margin-left: 0;

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

.domain-management__all-domains-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 16px;
	width: fit-content;
	margin: 0 auto;

	&.separator {
		border-top: 1px solid var(--studio-gray-5);
	}
}

.google-domain-owner-banner.card.banner {
	border-radius: 2px;
	border: 1px solid var(--gray-gray-5);
	display: flex;
	flex-direction: column;
	padding: 29px 20px 20px 20px;
	background:
		radial-gradient(ellipse at top left, rgba(235, 206, 224, 0.9), transparent 60%),
		linear-gradient(10deg, rgba(8, 117, 196, 0.6), transparent 60%),
		linear-gradient(240deg, rgba(0, 126, 101, 0.5), transparent 60%);

	background-repeat: no-repeat;
	background-size: 100% 52px;

	margin-top: 9px;
	margin-left: 17px;
	margin-right: 17px;

	@include break-medium {
		flex-direction: row;
		gap: 20px;
		align-items: center;
		padding: 21px 40px 21px 43px;
		background-size: 66px 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.banner__icons,
	.banner__content {
		justify-content: flex-start;
	}

	.banner__icons {
		.banner__icon,
		.banner__icon-no-circle {
			padding: 0;
			margin: 0;
			width: 46px;
			height: 46px;
		}
	}

	.banner__content {
		margin-top: 11px;
		@include break-medium {
			margin-top: 0;
		}

		.banner__info {
			.banner__title {
				color: var(--studio-gray-100);
				font-size: $font-body;
				line-height: 24px; /* 150% */
			}
			.banner__description {
				color: var(--studio-gray-70);
				font-size: $font-body-small;
				line-height: 20px; /* 142.857% */

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

		.banner__action {
			margin-top: 20px;
			@include break-medium {
				margin-top: 0;
			}

			.button.is-primary,
			.button.is-primary:hover,
			.button.is-primary:focus {
				display: flex;
				height: 40px;
				padding: 10px 24px;
				justify-content: center;
				align-items: center;
				gap: 8px;

				border-radius: 4px;
				background: var(--black-white-black, #000);
				box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
				border-color: var(--black-white-black, #000);
			}
		}
	}
}

// The /domains/manage/:site page
.is-bulk-site-domains-page .layout__content {
	overflow: auto;
}

// The `/domains/manage` page
// Generic domains table styles should go in `packages/domains-table/src/domains-table/style.scss`
.is-bulk-all-domains-page .layout__content,
.is-domain-in-site-context .layout__content {
	overflow: auto;
	.main {
		.navigation-header {
			padding-inline: 0;

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

			@include break-huge {
				max-width: 100%;

				.navigation-header__main {
					margin: 0 auto;
					padding-inline: 24px;
				}
			}
		}

		.bulk-domains-empty-state {
			.bulk-domains-empty-state__main {
				padding-inline: 16px;

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

	.empty-domains-list-card {
		@include breakpoint-deprecated( '<480px' ) {
			box-shadow: none;
		}
	}
	.domains-table-filter {
		align-items: flex-start;

		.domains-table-search {
			.components-base-control__field {
				margin: 0;
			}

			.components-input-control__container {
				background-color: var(--wp-components-color-background, #fff);
				border-radius: 2px;

				.components-input-control__suffix {
					> div {
						padding-right: 4px;
					}

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

			.components-input-base {
				height: 32px;
				max-width: 186px;
			}

			.components-input-control__input {
				font-size: 13px;
				height: 32px;
				padding-left: 8px;
				padding-right: 8px;
			}

			.components-input-control__backdrop {
				box-shadow: none;
			}

			@media only screen and ( max-width: 600px ) {
				.components-input-base {
					max-width: 217px;
				}

				.components-input-control__input {
					font-size: 1rem;
				}
			}
		}
	}
	.domains-table {
		margin-left: auto;
		margin-right: auto;

		@include break-xhuge {
			margin-left: auto;
			margin-right: auto;
		}


		.domains-table-toolbar {
			margin-inline: 5px;

			@include break-mobile {
				margin-inline: 32px;
			}

			@include break-small {
				margin-inline: 48px;
			}
		}

		table.is-7-column.has-checkbox {
			@include break-huge {
				grid-template-columns: 100px 2fr 1fr 1fr auto auto auto auto;

				th:last-child,
				td:last-child {
					padding: 0 64px 0 0;
				}

				th:first-child,
				td:first-child {
					padding: 0 0 0 72px;
				}
			}
		}

		.components-base-control {
			--checkbox-input-size: 16px;

			.components-checkbox-control__input-container {
				height: var(--checkbox-input-size);
				width: var(--checkbox-input-size);
			}
		}

		.domains-table__domain-name {
			font-size: 0.875rem;
		}

		.domains-table-checkbox-th {
			line-height: 14px;
		}

		.domains-table-row__actions button {
			color: var(--color-text-subtle);

			.gridicons-ellipsis {
				height: 18px;
				width: 18px;
			}
		}
	}

	.domains-table-mobile-cards {
		.components-base-control {
			display: flex;
			align-items: center;

			&__field {
				line-height: 14px;
			}

			.components-checkbox-control__input {
				height: var(--checkbox-input-size);
				width: var(--checkbox-input-size);
			}
		}
	}

	.options-domain-button__add.gridicon:not(:last-child) {
		margin: auto;
	}
}

.domains-overview .main.domains-overview__list {
	display: none;
	max-width: 400px;

	@include break-wide {
		display: block;
	}
}

.domains-overview.is-domain-selected .main.domains-overview__list {
	height: calc(100vh - 32px - var(--masterbar-height));
}

main.domains-overview main.domains-overview__list .hosting-dashboard-layout-column__container {
	// Header navigation styles
	.navigation-header {
		padding: 0;

		.navigation-header__main {
			padding: 16px 24px;
			margin: 0;
		}
	}

	// Header title styles
	.formatted-header__title {
		display: flex;
		align-items: center;
		min-height: 40px;
		font-size: 1.25rem;
		font-weight: 500;
		letter-spacing: normal;
	}

	// Split button styles
	.navigation-header__main .options-domain-button {
		&.split-button {
			--white-separator-color: rgba(255, 255, 255, 0.3);
			display: inline-block;
			white-space: nowrap;
		}

		.split-button__main,
		.split-button__toggle {
			display: inline-flex;
			align-items: center;
			height: 28px;
			padding: 0 12px;
			font-size: 0.75rem;
			line-height: 14px;
		}

		.split-button__main {
			font-weight: 400;
			border-radius: 2px 0 0 2px;
			-webkit-font-smoothing: antialiased;
		}

		.split-button__toggle.button svg.gridicon {
			position: relative;
			top: 2px;
			width: 18px;
			height: 18px;
			margin-top: -2px;
		}
	}
}

.is-bulk-all-domains-page .popover.status-popover__tooltip .popover__inner {
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}
