@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';
@import '@wordpress/base-styles/variables';
@import '@wordpress/dataviews/build-style/style.css';

body.is-section-domains.is-bulk-all-domains-page {
	main.dataviews {
		background: var( --color-surface );
		max-width: none;
		height: calc(
			100vh - var( --masterbar-height ) - var( --content-padding-top ) - var(
					--content-padding-bottom
				)
		);
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-y: auto;

		.navigation-header {
			padding-top: 16px;

			.formatted-header {
				max-height: 41px;
			}

			.navigation-header__main {
				align-items: center;
			}

			.formatted-header__title {
				color: var( --studio-gray-80, #2c3338 );
				font-size: 1.5rem;
				font-style: normal;
				font-weight: 500;
				line-height: 1.2;
			}

			.domain-header__buttons .button {
				line-height: 22px;
				white-space: nowrap;
				margin-left: 0;
			}

			.domain-header__buttons-mobile {
				white-space: nowrap;
			}
		}

		.domains-dataviews {
			flex-grow: 1;
			margin-top: 0;
			overflow: hidden;
			padding-bottom: 0;

			.domains-dataviews__domain-name-button {
				width: 100%;
				height: 100%;
				display: inline-block;
				padding: 0;

				div {
					text-align: left;
				}
			}

			&.domains-dataviews-list {
				.domains-dataviews__domain-name-button {
					width: 280px;
				}
			}

			.domains-dataviews__domain-name {
				font-size: 14px;
				font-weight: 500;

				a:hover {
					text-decoration: underline;
					color: var( --color-link );
				}
			}

			.domains-dataviews__domain-failed-label {
				color: var( --studio-red-80 );
				background: var( --studio-red-5 );
				font-size: 0.75rem;
				border-radius: 2px;
				padding: 2px 8px;
				margin-left: 8px;
			}

			.domains-dataviews__primary-domain-label {
				margin-bottom: 4px;
			}

			.list-status-cell__bubble {
				display: flex;
				width: 18px;
				background: var( --studio-red-40 );
				border-radius: 16px;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: $font-body-extra-small;
				height: 18px;
				margin: 0 4px;
				line-height: 20px;
			}

			.domains-table-row__ssl-cell {
				gap: 2px;
				display: flex;

				&__active {
					fill: var( --studio-green-50 );
					color: var( --studio-green-50 );
				}

				&__pending,
				&__disabled {
					fill: var( --studio-orange-50 );
					color: var( --studio-orange-50 );
				}
			}

			.domains-table-row__ssl-status-button {
				color: inherit;
			}

			.domains-table-row__status-cell {
				white-space: pre-line;
				display: flex;
				align-items: center;
				gap: 4px;
				font-size: $font-body-small;

				svg {
					color: currentColor;
				}

				&__status-success,
				&__status-premium {
					color: var( --studio-green-50 );
				}

				&__status-verifying,
				&__status-warning {
					color: var( --studio-orange-50 );
				}

				&__status-alert,
				&__status-error {
					color: var( --studio-red-50 );
				}
			}
		}
	}

	@include break-small {
		.layout__primary > main.dataviews {
			border: 1px solid $gray-200;
			border-radius: 8px;
		}
	}
}
