.dialog-button.svelte-nbn1m9 {
		display: block;
		width: var(--size-10);
		height: var(--size-5);
		border: var(--block-border-width) solid var(--block-border-color);
	}

	.dialog-button.svelte-nbn1m9:disabled {
		cursor: not-allowed;
	}

	.input.svelte-nbn1m9 {
		display: flex;
		align-items: center;
		padding: 0 10px 15px;
	}

	.input.svelte-nbn1m9 input:where(.svelte-nbn1m9) {
		height: 30px;
		width: 100%;
		flex-shrink: 1;
		border-bottom-left-radius: 0;
		border: 1px solid var(--block-border-color);
		letter-spacing: -0.05rem;
		border-left: none;
		border-right: none;
		font-family: var(--font-mono);
		font-size: var(--scale-000);
		padding-left: 15px;
		padding-right: 0;
		background-color: var(--background-fill-secondary);
		color: var(--block-label-text-color);
	}

	.swatch.svelte-nbn1m9 {
		width: 50px;
		height: 50px;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
		flex-shrink: 0;
		border: 1px solid var(--block-border-color);
	}

	.color-picker.svelte-nbn1m9 {
		width: 230px;
		background: var(--background-fill-secondary);
		border: 1px solid var(--block-border-color);
		border-radius: var(--block-radius);
		margin: var(--spacing-sm) 0;
	}

	.buttons.svelte-nbn1m9 {
		height: 20px;
		display: flex;
		justify-content: stretch;
		gap: 0px;
	}

	.buttons.svelte-nbn1m9 button:where(.svelte-nbn1m9) {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--block-border-color);
		background: var(--background-fill-secondary);
		padding: 3px 6px;
		font-size: var(--scale-000);
		cursor: pointer;
		border-right: none;
		width: 100%;
		border-top: none;
	}

	.buttons.svelte-nbn1m9 button:where(.svelte-nbn1m9):first-child {
		border-left: none;
	}

	.buttons.svelte-nbn1m9 button:where(.svelte-nbn1m9):last-child {
		border-bottom-right-radius: 15px;
		border-right: 1px solid var(--block-border-color);
	}

	.buttons.svelte-nbn1m9 button:where(.svelte-nbn1m9):hover {
		background: var(--background-fill-secondary-hover);
		font-weight: var(--weight-bold);
	}

	.buttons.svelte-nbn1m9 button.active:where(.svelte-nbn1m9) {
		background: var(--background-fill-secondary);
		font-weight: var(--weight-bold);
	}

	.input-wrap.svelte-nbn1m9 {
		display: flex;
	}

	.color-gradient.svelte-nbn1m9 {
		position: relative;
		--hue: white;
		background:
			linear-gradient(rgba(0, 0, 0, 0), #000),
			linear-gradient(90deg, #fff, hsl(var(--hue), 100%, 50%));
		width: 100%;
		height: 150px;
		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	}

	.hue-slider.svelte-nbn1m9 {
		position: relative;
		width: 90%;
		margin: 10px auto;
		height: 10px;
		border-radius: 5px;
		background: linear-gradient(
			to right,
			hsl(0, 100%, 50%) 0%,
			#ff0 17%,
			lime 33%,
			cyan 50%,
			blue 67%,
			magenta 83%,
			red 100%
		);
	}

	.swatch.svelte-nbn1m9 {
		width: 50px;
		height: 50px;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
		flex-shrink: 0;
		border: 1px solid var(--block-border-color);
	}

	.eyedropper.svelte-nbn1m9 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25px;
		height: 30px;
		border-top-right-radius: 15px;
		border: 1px solid var(--block-border-color);
		border-left: none;
		background: var(--background-fill-secondary);
		height: 30px;
		padding: 7px 7px 5px 0px;
		cursor: pointer;
	}

	.marker.svelte-nbn1m9 {
		position: absolute;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		border: 2px solid white;
		top: -2px;
		left: -7px;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
		pointer-events: none;
	}

	input.svelte-nbn1m9 {
		width: 100%;
		height: 30px;
		border: 1px solid var(--block-border-color);
		border-radius: var(--radius-sm);
		padding: 0 var(--size-2);
		font-family: var(--font-mono);
		font-size: var(--scale-000);
		color: var(--block-label-text-color);
		background-color: var(--background-fill-primary);
	}