:root {
	--drawer-max-width--desktop: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
}

.drawer.saye-drawer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	display: flex;
	justify-content: flex-end;
	width: 100vw;
	height: 100vh;
	background-color: var(--color__black-30);
	transition: visibility var(--duration-default) ease;

	.drawer__inner {
		padding: var(--spacing__48px);
		overflow: auto;
		border: 0;

		@media screen and (max-width: 1024px) {
			max-width: none;
			margin-top: auto;
			padding: var(--spacing__32px);
			transform: translateY(100%);
		}

		@media screen and (min-width: 1025px) {
			width: var(--drawer-max-width--desktop);
		}
	}

	.drawer__inner--fit-height {
		@media screen and (max-width: 1024px) {
			height: fit-content;
		}
	}

	.drawer.active .drawer__inner {
		@media screen and (max-width: 1024px) {
			transform: translateY(0);
		}
	}

	.drawer__overlay {
		position: fixed;
		inset: 0;
		display: block;
	}

	.drawer__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: calc(var(--spacing__24px) * -1) calc(var(--spacing__16px) * -1) var(--spacing__8px)
			calc(var(--spacing__16px) * -1);
		padding: 0;
	}

	.drawer__close {
		position: unset;
		display: block;
		min-width: auto;
		min-height: auto;
		margin-right: calc(var(--spacing__8px) * -1);
		margin-left: auto;
	}
}