.draggable-drawer {
	position: fixed;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	display: flex;
	justify-content: center;

	flex-shrink: 0;
	align-items: center;

	z-index: 40;

	transition: background-color 0.2s linear;

	overflow-y: hidden;
	overscroll-behavior: none;

	.draggable-drawer_body {
		position: absolute;

		z-index: 50;

		bottom: 0px;

		width: 100%;
		max-width: 700px;

		height: fit-content;
		max-height: 90%;

		background-color: var(--background-color-primary);

		padding: 30px 10px 10px 10px;

		border-top-left-radius: 8px;
		border-top-right-radius: 8px;

		.dragger-area {
			width: 100%;
			height: 50px;

			position: absolute;

			display: flex;

			align-items: flex-start;
			justify-content: center;

			top: 10px;
			left: 0;

			z-index: 55;

			.dragger-indicator {
				background-color: var(--background-color-contrast);
				width: 100px;
				height: 8px;

				border-radius: 8px;
			}
		}
	}

	.draggable-drawer_body {
		&::after {
			content: "";

			display: block;
			position: absolute;

			left: 0;
			bottom: 0;

			width: 100%;
			height: 120px;

			z-index: 45;

			background-color: var(--background-color-primary);

			transform: translateY(95%);
		}
	}

	&.fill-end {
		.draggable-drawer_body {
			&::after {
				content: "";

				display: block;
				position: absolute;

				left: 0;
				bottom: 0;

				width: 100%;
				height: 120px;

				z-index: 45;

				background-color: var(--background-color-primary);

				transform: translateY(95%);
			}
		}
	}
}