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

.language-picker__modal-search {
	position: relative;
	width: 250px;
}

.language-picker__overlay {
	justify-content: center;
}

.language-picker-modal__wrapper {
	// Limit the height to prevent modal resize on content change, when the modal is not full height.
	@media (min-width: $break-small) {
		max-height: 600px;
		// Limit height on smaller screens.
		height:80%;
	}

	.language-picker-modal__content {
		display:flex;
		flex-direction: column;
		// Limit height to container, instead of overflowing and pushing down the footer.
		height: 100%;
	}
	.language-picker-modal__body {
		overflow-y: auto;
		// Fix cropped box shadow.
		padding:1px;
		margin:-1px;
	}
	.language-picker-modal__footer {
		margin-top: auto;
	}

	.components-modal__content {
		display: flex;
	}
	// Force width to 100% even if the content is not that wide.
	.components-modal__content > div {
		width: 100%;
	}

}

.language-picker__modal-empathy-mode {
	display: flex;
	align-items: center;

	.form-label:last-child {
		margin-bottom: 0;
	}
}

.language-picker__modal-checkboxes {
	border-bottom: 1px solid var(--color-neutral-0);
	width: 100%;
	padding: 24px;
	text-align: left;
}

.language-picker__modal-locale-notice {
	&:not(:last-child) {
		margin-bottom: 5px;
	}
}

.language-picker__modal-incomplete-locale-notice {
	color: var(--color-text-subtle);
	fill: var(--color-text-subtle);
	display: inline-block;

	&-info {
		display: flex;
		align-items: flex-end;
	}
}

.language-picker__modal-incomplete-locale-nudge-text {
	font-weight: normal;
	font-size: 0.875rem;
	display: flex;
	align-items: flex-start;

	.material-icon {
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		margin: 2px 8px 0 0;
		fill: currentColor;
	}
}

.language-picker__modal-incomplete-locale-text {
	margin-right: 8px;
}

.language-picker__modal-buttons {
	padding: 24px 24px 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
