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

.import-from-wpcom-modal {
	max-width: 827px;
	max-height: 100%;
	margin: 0;

	.components-modal__content {
		padding: 0;

		> div {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			position: relative;
		}
	}

	@include break-small {
		margin: auto;
	}
}

.import-from-wpcom-modal__main {
	padding: 20px;
	gap: 8px;
	display: flex;
	flex-direction: column;
	height: 680px;

	@include break-large {
		width: 800px;
		padding: 40px;
	}
}

.import-from-wpcom-modal__title {
	@include heading-x-large;
	margin: 0;
	padding: 0;
}

p.import-from-wpcom-modal__instruction {
	@include body-small;
	margin: 0;
	color: var(--color-accent-60);
}

.import-from-wpcom-modal__footer {
	padding: 24px 40px;
	text-align: right;
	border-radius: 4px;
	position: fixed;
	bottom: 0;
	width: 100%;
	background: var(--color-light-backdrop);

	.button {
		margin-inline-end: 8px;
	}
}

.import-from-wpcom-modal__close-button {
	position: absolute;
	inset-inline-end: 1rem;
	inset-block-start: 1rem;
	cursor: pointer;
	transition: scale 0.2s ease-in;
	max-height: 24px;

	&:hover {
		scale: 1.2;
	}

	&:focus-visible {
		border-color: var(--color-primary);
		outline: none;
		box-shadow: 0 0 0 2px var(--color-primary-10);
		border-radius: 4px;
	}
}

.wpcom-sites-table.redesigned-a8c-table {
	overflow-y: auto;
	margin-block: 24px;

	&::-webkit-scrollbar {
		width: 4px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: rgba(155, 155, 155, 0.5);
		border-radius: 4px;
		border: transparent;
	}


	&::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 80px;
		width: 100%;
		height: 5%;
		display: inline-block;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%);
		transition: opacity 0.3s ease-out;
	}

	.dataviews-wrapper tr.dataviews-view-table__row {
		.components-checkbox-control__input {
			opacity: 1;
		}

		.components-checkbox-control__label {
			cursor: pointer;
		}

		td {
			border-bottom: none;
			padding-block: 8px;
		}
	}

	.dataviews-view-table {
		padding-block-end: 80px;
		margin: 0 0 32px;
	}

	.dataviews-view-table thead {
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.wpcom-sites-table__icon {
		width: 24px;
		height: 24px;
	}
}

.wpcom-sites-table__site-mobile {
	display: inline-flex;
	align-items: center;

	.wpcom-sites-table__icon {
		margin-inline-end: 8px;
	}

	span {
		@include body-small;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 215px;

		@include break-mobile {
			max-width: 370px;
		}

		@include break-small {
			max-width: 400px;
		}

		@include break-large {
			max-width: unset;
		}
	}
}
