$textColor: #4e4e4e;
$borderColor: #c7d7e2;
$borderHoverColor: #c7d7e2;
$bgColor: #f4f8f9;
$bgHoverColor: #dae7eb;

.kit-legacy-filter-group-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	margin: 0;
	padding: 5px 24px;
	background-color: $bgColor;
	border: 1px solid $borderColor;
	border-radius: 6px;
	outline: none;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 14px;
	color: $textColor;
	text-align: center;
	transition: color 0.15s, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out;
	cursor: pointer;

	&:disabled {
		opacity: 0.35;
		cursor: auto;
	}

	&:hover:not(:disabled),
	&:focus:not(:disabled) {
		background-color: $bgHoverColor;
		border-color: $borderHoverColor;
		color: $textColor;
	}

	svg {
		margin-right: 5px;
	}
}