.panel.svelte-1bf1bu5 {
		flex-basis: 0;
		flex-shrink: 0;

		/* Without this, Panel sizes may be unintentionally overridden
         by their content */
		overflow: hidden;
	}

	.root.svelte-11ja8no {
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.separator.svelte-ash4vv {
		/* Since drag handler is always rendered within flex
           PanelGroup component is safe to assume that flex rules
           can applied here. */
		flex: 0 0 2px;

		&.thin {
			flex: 0 0 1px;
		}
		display: flex;
		touch-action: none;
		user-select: none;
		width: 100%;
		height: 100%;
		background: var(--color-border);
		position: relative;
		align-items: center;
		justify-content: center;
		outline: none;

		&::before {
			content: '';
			z-index: 1;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			min-width: 3px;
			min-height: 3px;
		}

		&[data-resize-handle-state='hover']::before {
			display: block;
			background: var(--secondary);
		}

		&[data-resize-handle-state='hover'] .handle:where(.svelte-ash4vv) {
			background: var(--secondary);
		}

		&:focus::before,
		&[data-resize-handle-state='drag']::before {
			display: block;
			background: color-mix(in srgb, var(--background) 5%, var(--foreground));
		}

		&:focus .handle:where(.svelte-ash4vv),
		&[data-resize-handle-state='drag'] .handle:where(.svelte-ash4vv) {
			color: var(--primary-foreground);
			background: color-mix(in srgb, var(--background) 5%, var(--foreground));
		}

		&[data-panel-group-direction='vertical'] .handle:where(.svelte-ash4vv) {
			transform: rotate(-90deg);
		}
	}

	.handle.svelte-ash4vv {
		z-index: 1;
		background: var(--muted);
	}