@import "/styles/_theme.scss";

.packagefilter
{
	width: 100%;
	flex-shrink: 0;

	.left
	{
		flex-grow: 1;
		flex-shrink: 0;
		gap: 16px;
	}

	.right
	{
		flex-grow: 1;
		flex-shrink: 0;
		gap: 16px;
	}
}

.packagefilter textentry
{
	flex-grow: 1;
	padding: 8px 12px;
	pointer-events: all;

	Label
	{
		margin-left: 26px;
	}

	iconpanel
	{
		position: absolute;
		left: 12px;
		opacity: 0.3;
		font-size: $text-large;
	}
}

	.packagefilterfacet, .packagefilter textentry
	{
		background-color: rgba($default-950, 0.3);
		color: $default-text;
		outline: 1px solid $default-border;
		transition: all 150ms $easing;
		border-radius: $rounding-default;
		padding: 4px 12px;
		gap: 16px;
		flex-shrink: 0;
		font-size: 14px;
		cursor: pointer;
		align-items: center;

		.clear-button
		{
			height: 100%;
			margin-right: -8px;
			align-items: center;
			padding: 0px 4px;

			&:hover
			{
				color: red;
				border-radius: 100%;
			}
		}

		&.is-active
		{
			background-color: $default-700;
		}

		&:not(.is-active)
		{
			&:hover
			{
				outline: 1px solid $default-50;
			}
		}
	}