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

.chip-grid {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;

	> .chip {
		flex-grow: 0;
		flex-shrink: 0;
	}
}

.chip {
	pointer-events: all;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: $dock-input-h;
	padding: 0 14px;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	color: $text;
	cursor: pointer;
	font-size: $fs-3;
	font-weight: 700;
	font-family: $font-primary;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color 0.08s ease, color 0.08s ease, border-color 0.08s ease;

	&:hover { color: $accent; background-color: $bg-elev; border-color: $accent; }

	&.active {
		background-color: transparent;
		border-color: $accent;
		color: $text;
		font-weight: 800;
	}

	&.small {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 30px;
		padding: 0 12px;
		font-family: $font-mono;
		font-size: $fs-1;
		letter-spacing: 1px;
	}

	&.primary {
		background-color: $accent;
		border-color: $accent;
		color: $accent-ink;

		&:hover {
			background-color: $accent-strong;
			border-color: $accent-strong;
			color: $accent-ink;
		}
	}

	&.add {
		color: $accent;
		border-color: $accent;
		background-color: transparent;
		&:hover { background-color: $accent-soft; }
	}

	&.danger {
		color: $text-faint;
		&:hover { color: $danger; border-color: $danger-line; }
	}
}