@charset "utf-8";

/* ******************** color-text-input design */

:has( >*>#user-color ) {
	display: flex;
	align-items: center;
	gap: var(--gap-size);
	& button {flex: none;}
}
:has( >#user-color ) {
	width: 0;
	flex: auto;
	display: flex;
	align-items: center;
    gap: var(--gap-size);
	>#user-color {
		width: var(--button-size);
		height: var(--button-size);
		margin-left: calc(-1 * var(--gap-size));
		padding-left: calc(1 * var(--gap-size));
		z-index: 1;
		>svg { height: calc(2 * var(--button-size) / 5); }
	}
	>[type="text"] {
		width: 0;
		height: 2em;
		flex: auto;
		margin-left: calc(-1 * var(--button-size));
		padding-left: calc(1 * var(--button-size) - var(--gap-size));
		padding-right: 1em;
		background: var(--back-color);
		border-radius: calc(var(--button-size) / 3);
		box-shadow: var(--inset-shadow);
		font-weight: bold;
		&::placeholder { font-weight: normal; }
	}
}