.wrapper {
	display: flex;
	flex-direction: row;
	height: 36px;
	border: 1px solid var( --jp-gray-40 );
	border-radius: calc( var( --jp-border-radius ) / 2 );
	padding: calc( var( --spacing-base ) * 0.5 );
	padding-left: calc( var( --spacing-base ) * 1.5 );
	background-color: var( --jp-white );

	&:focus-within {
		box-shadow: 0 0 0 1px var( --jp-black ) inset;
	}

	> input {
		all: unset;
		width: 100%;
		border: 0;
		font-size: var( --font-body-small );
		color: var( --jp-gray-80 );
		outline: none;
		text-overflow: ellipsis;
		cursor: default;

		&:focus {
			outline: none;
			box-shadow: none;
			border: none;
		}
	}

	.button-wrapper {
		display: inline-flex;
	}
}