@alegendstale/holly-components/dist/components/bottom-sheet/bottom-sheet.styles.js

Reusable UI components created using lit

import { css as o } from "lit";
const e = o`
	:host {
		contain: content;
		overscroll-behavior-block: none;
		--height: fit-content;
	}

	:host([dragging]) dialog {
		#content {
			cursor: grabbing;
			/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
			touch-action: none;
			/* Prevent weird scrollbar movement on mobile when dragging */
			overflow-y: hidden;
		}
	}

	:host(:not([dragging])) dialog {
		/* Only animate if not dragging */
		transition-property: overlay opacity display;
		transition-duration: 0.25s;
		transition-behavior: allow-discrete;

		&::backdrop {
			transition-property: overlay opacity display;
			transition-duration: 0.25s;
			transition-behavior: allow-discrete;
		}

		#content {
			/* Allow scroll */
			touch-action: pan-y;
		}
	}

	dialog {
		display: none;
		opacity: 0;
		translate: 0 var(--height);

		height: var(--height);
		min-height: 0;
		max-height: 100%;
		min-width: 100%;
		max-width: 100%;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0;
		border: 0;
		background-color: light-dark(#d9d9d9, #1c1c1c);
		/* Important! Removes default browser styling, allowing bottom to work */
		inset: unset;
		bottom: 0;
		left: 0;
		overflow-y: hidden;

		/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
		touch-action: none;
		/* Prevent weird scrollbar movement on mobile when dragging */
		overflow-y: hidden;

		&[open] {
			display: flex;
			opacity: 1;
			translate: 0 0;

			&::backdrop {
				opacity: 0.8;
			}
		}

		&::backdrop {
			background: black;
			opacity: 0;
		}
	}

	@starting-style {
		dialog[open] {
			opacity: 0;
			translate: 0 var(--height);

			&::backdrop {
				opacity: 0;
			}
		}
	}

	#handle {
		display: block;
		position: sticky;
		top: 0;
		background: transparent;
		border: 0;
		cursor: grabbing;
		min-height: 35px;
		user-select: none;
		touch-action: none;
	}

	div {
		/* display: contents; */
		overflow-y: auto;
		scrollbar-width: none;
		box-sizing: border-box;
		min-height: 100%;
		min-width: 100%;
	}

	::slotted(*) {
		/* Prevent slotted items from taking pointer events */
		/* pointer-events: none; */
	}
`;
export {
  e as default
};