/* Mobile styles (≤ 768px) */
	@media (max-width: 768px) {
		.sidebar.svelte-1uruprb {
			width: 100vw !important;
		}

		.sidebar.svelte-1uruprb:not(.right) {
			left: -100vw !important;
		}

		.sidebar.right.svelte-1uruprb {
			right: -100vw !important;
		}

		.sidebar.svelte-1uruprb:not(.reduce-motion) {
			transition: transform 0.3s ease-in-out !important;
		}

		.sidebar-parent {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		.sidebar-parent:has(.sidebar.open) {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
		.sidebar.open.svelte-1uruprb {
			z-index: 1001 !important;
		}
	}

	.sidebar-parent {
		display: flex !important;
		padding-left: 0;
		padding-right: 0;
	}

	.sidebar-parent:not(.reduce-motion) {
		transition:
			padding-left 0.3s ease-in-out,
			padding-right 0.3s ease-in-out;
	}

	.sidebar-parent:has(.sidebar.open:not(.right)) {
		padding-left: var(--overlap-amount);
	}

	.sidebar-parent:has(.sidebar.open.right) {
		padding-right: var(--overlap-amount);
	}

	.sidebar.svelte-1uruprb {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		height: 100%;
		background-color: var(--background-fill-secondary);
		transform: translateX(0%);
		z-index: 1000;
	}

	.sidebar.svelte-1uruprb:not(.reduce-motion) {
		transition: transform 0.3s ease-in-out;
	}

	.sidebar.open.svelte-1uruprb:not(.right) {
		transform: translateX(100%);
		box-shadow: var(--size-1) 0 var(--size-1) rgba(0, 0, 0, 0.05);
	}

	.sidebar.open.right.svelte-1uruprb {
		transform: translateX(-100%);
		box-shadow: calc(var(--size-1) * -1) 0 var(--size-1) rgba(0, 0, 0, 0.05);
	}

	.toggle-button.svelte-1uruprb {
		position: absolute;
		top: var(--size-4);
		background: var(--background-fill-secondary);
		border: 1px solid var(--border-color-primary);
		cursor: pointer;
		padding: var(--size-2);
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--size-7);
		height: var(--size-8);
		z-index: 1001;
		border-radius: 0;
	}

	.toggle-button.svelte-1uruprb:not(.reduce-motion) {
		transition: all 0.3s ease-in-out;
	}

	.sidebar.svelte-1uruprb:not(.right) .toggle-button:where(.svelte-1uruprb) {
		left: 100%;
		border-radius: 0 var(--size-8) var(--size-8) 0;
		border-left: none;
	}

	.sidebar.right.svelte-1uruprb .toggle-button:where(.svelte-1uruprb) {
		right: 100%;
		transform: rotate(180deg);
		border-radius: 0 var(--size-8) var(--size-8) 0;
		border-left: none;
	}

	.open.svelte-1uruprb:not(.right) .toggle-button:where(.svelte-1uruprb) {
		right: 0;
		left: auto;
		transform: rotate(180deg);
		border-radius: 0 var(--size-8) var(--size-8) 0;
		border-left: none;
		border-right: 1px solid var(--border-color-primary);
	}

	.open.right.svelte-1uruprb .toggle-button:where(.svelte-1uruprb) {
		left: 0;
		right: auto;
		transform: rotate(0deg);
		border-radius: 0 var(--size-8) var(--size-8) 0;
		border-left: none;
		border-right: 1px solid var(--border-color-primary);
	}

	.chevron.svelte-1uruprb {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 8px;
	}

	.chevron-left.svelte-1uruprb {
		position: relative;
		width: var(--size-3);
		height: var(--size-3);
		border-top: var(--size-0-5) solid var(--body-text-color);
		border-right: var(--size-0-5) solid var(--body-text-color);
		transform: rotate(45deg);
	}

	.sidebar-content.svelte-1uruprb {
		padding: var(--size-5);
		padding-right: var(--size-8);
		overflow-y: auto;
	}

	.sidebar.right.svelte-1uruprb .sidebar-content:where(.svelte-1uruprb) {
		padding-left: var(--size-8);
	}