@body_border_radius: 24px;

.draggable-drawer {
	position: fixed;

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

	display: flex;
	justify-content: center;

	align-items: center;

	z-index: 50;

	transition: background-color 0.2s linear;

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

	box-sizing: border-box;

	.draggable-drawer_body_background {
		box-sizing: border-box;

		position: absolute;

		z-index: 50;

		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		border-top-left-radius: @body_border_radius;
		border-top-right-radius: @body_border_radius;

		transition: all 150ms ease-in-out;

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

		opacity: 0.4;

		&::after {
			content: "";

			display: block;
			position: absolute;

			left: 0;
			bottom: 0;

			width: 100%;
			height: 120px;

			z-index: 45;

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

			transform: translateY(95%);
		}
	}

	.draggable-drawer_body {
		box-sizing: border-box;

		position: absolute;

		z-index: 55;

		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: @body_border_radius;
		border-top-right-radius: @body_border_radius;

		.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_content {
			position: relative;

			z-index: 100;

			display: flex;
			flex-direction: column;

			width: 100%;
			height: 100%;
		}

		&::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%);
		}
	}
}