.b24-bottom-sheet {
	--right-start: 0;
	--right-end: 0;
	right: var(--right-end);
	bottom: 0;
	left: 0 !important;
	padding-top: 0 !important;
	transition: .2s top, .2s right;
}

.b24-bottom-sheet.--expanded {
	--right-end: calc(100% - 800px);
	top: 40px !important;
}

.b24-bottom-sheet.--show {
	animation: 300ms b24-bottom-sheet-show forwards;
}

.b24-bottom-sheet.--close {
	animation: 300ms b24-bottom-sheet-hide forwards;
}

@keyframes b24-bottom-sheet-show {
	from {
		transform: translateY(100%);
		right: var(--right-start);
	}
	to {
		transform: translateY(0);
		right: var(--right-end);
	}
}

@keyframes b24-bottom-sheet-hide {
	from {
		transform: translateY(0);
		right: var(--right-end);
	}
	to {
		transform: translateY(100%);
		right: var(--right-start);
	}
}

.b24-bottom-sheet-content {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding-top: max(calc(var(--padding) - 6px), 0px);
	--padding: 24px;
}