@use "@wordpress/base-styles/breakpoints" as breakpoints;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

.preferences-modal {
	// To keep modal dimensions consistent as subsections are navigated, width
	// and height are used instead of max-(width/height).
	@include break-small() {
		width: calc(100% - #{ $grid-unit-20 * 2 });
		height: calc(100% - #{ $header-height * 2 });
	}
	@include break-medium() {
		width: breakpoints.$break-medium - $grid-unit-20 * 2;
	}
	@include break-large() {
		height: 70%;
	}

	// Clears spacing to flush fit the navigator component to the modal edges.
	@media (max-width: #{ (breakpoints.$break-medium - 1) }) {
		.components-modal__content {
			padding: 0;
		}
	}
}