.drawer {
	position: fixed;

	// Top inset is reduced by 1px so the bottom navbar border doesn't overlap the drawer top border.
	inset: calc(var(--global-navbar-height) - 1px) 0 auto 0;

	z-index: var(--global-z-index-drawer);

	height: calc(100dvh - var(--global-navbar-height));

	overflow-x: hidden;

	&[aria-expanded='false'] {
		display: none;
	}

	&[aria-expanded='true'] {
		display: grid;
	}

	&__inner {
		overflow: hidden;

		height: 100%;

		background-color: rgb(var(--global-colors-white-values) / 0.9);
		backdrop-filter: blur(1.5rem) saturate(1.5);

		padding: var(--global-grid-side-padding);
		padding-top: 2rem;

		border-top: 1px solid var(--global-colors-gray100);

		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	// If admin bar is visible.
	body.admin-bar & {
		// stylelint-disable-next-line custom-property-pattern
		inset: calc(var(--global-navbar-height) + var(--wp-admin--admin-bar--height) - 1px) 0 auto 0;

		// stylelint-disable-next-line custom-property-pattern
		height: calc(100dvh - var(--global-navbar-height) - var(--wp-admin--admin-bar--height));
	}
}

body.is-menu-open {
	overflow: hidden;
}

// NoJS version if :has is supported.
@supports selector(:has(*)) {
	body:has(.drawer[aria-expanded='true']) {
		overflow: hidden;
	}
}