@import "/ui/styles/_theme.scss";

.pill {
	pointer-events: all;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 10px;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	color: $text-dim;
	cursor: pointer;
	font-size: $fs-3;
	font-weight: 700;
	font-family: $font-primary;
	letter-spacing: 1px;
	text-transform: uppercase;

	.pill-dot {
		width: 6px; height: 6px;
		flex-shrink: 0;
		background-color: $text-mute;
	}

	&:hover { color: $text; border-color: $accent; }
	&.active {
		background-color: transparent;
		border-color: $accent;
		color: $text;
		font-weight: 800;
		.pill-dot { background-color: $accent; }
	}
	&.add {
		color: $accent;
		border-color: $accent;
		background-color: transparent;
		&:hover { background-color: $accent-soft; }
	}
	&.danger {
		color: $danger;
		border-color: $danger-line;
		background-color: transparent;
		&:hover { background-color: $danger-soft; }
	}
}