@import "/UI/Theme.scss";

UIColor
{
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	height: 24px;
	gap: 2px;
	pointer-events: all;

	.swatch
	{
		width: 47px;
		height: 24px;
		flex-shrink: 0;
		padding: 1px;
		border: 1px solid $ui-control-border;
		cursor: pointer;

		.fill
		{
			width: 100%;
			height: 100%;
		}

		&:hover
		{
			border-color: $ui-control-border-hover;
		}
	}

	.textentry
	{
		width: 67px;
		height: 24px;
		min-height: 24px;
		flex-shrink: 0;
		padding: 0 4px;
		justify-content: center;
		background-color: transparent;
		border: 1px solid $ui-control-border;
		border-radius: 0;
		font-family: "Inter";
		font-size: $ui-settings-font;
		font-weight: 500;
		color: $ui-blue;

		.content-label
		{
			flex-grow: 1;
			text-align: center;
			color: $ui-blue;
		}

		@include ui-focus-ring;

		&.invalid .content-label
		{
			color: $ui-danger;
		}
	}
}