@use "../kit-deps" as *;
@use "typography" as *;

.chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: $space-2;
	align-items: center;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: $space-2;
	min-height: 30px;
	padding: $space-1 $space-3;
	border: $border-width-base solid $border-color-muted;
	color: $color-text-medium;
	background: $surface-panel-muted;
	font-family: $font-family-base;
	font-size: $font-size-xs;
	font-weight: $font-weight-semibold;
	line-height: $line-height-base;
	text-transform: uppercase;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: color, background, border-color, opacity;

	.ph,
	.ph-bold {
		font-size: $icon-size-sm;
	}

	&::before {
		content: "";
		display: inline-block;
		width: 7px;
		height: 7px;
		flex: 0 0 auto;
		background: $color-text-dark;
	}

	&:has(.ph)::before,
	&:has(.ph-bold)::before {
		display: none;
	}

	.chip-remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: $icon-size-sm;
		height: $icon-size-sm;
		margin-right: -$space-1;
		border: 0;
		color: inherit;
		background: transparent;
		font: inherit;
		cursor: pointer;

		&:focus-visible {
			@include focus_ring;
		}
	}

	&.chip-primary {
		color: $color-primary;
		background: rgba($color-primary, 0.08);
		border-color: $color-primary;

		&::before {
			background: $color-primary;
		}
	}

	&.chip-secondary {
		color: $color-secondary;
		background: rgba($color-secondary, 0.08);
		border-color: $color-secondary;

		&::before {
			background: $color-secondary;
		}
	}

	&.chip-success {
		color: $color-success;
		background: rgba($color-success, 0.08);
		border-color: $color-success;

		&::before {
			background: $color-success;
		}
	}

	&.chip-warning {
		color: $color-warning;
		background: rgba($color-warning, 0.08);
		border-color: $color-warning;

		&::before {
			background: $color-warning;
		}
	}

	&.chip-danger,
	&.chip-error {
		color: $color-error;
		background: rgba($color-error, 0.08);
		border-color: $color-error;

		&::before {
			background: $color-error;
		}
	}

	&.chip-selected,
	&[aria-pressed="true"],
	&[aria-selected="true"] {
		color: $color-black;
		background: $color-primary;
		border-color: $color-primary;

		&::before {
			background: $color-black;
		}
	}

	&.chip-selected.chip-secondary,
	&.chip-secondary[aria-pressed="true"],
	&.chip-secondary[aria-selected="true"] {
		background: $color-secondary;
		border-color: $color-secondary;
	}

	&.chip-disabled,
	&:disabled {
		color: $color-text-dark;
		background: $surface-panel;
		border-color: $border-color-muted;
		cursor: not-allowed;
		opacity: 0.7;

		&::before {
			background: $color-grey;
		}
	}
}

button.chip,
a.chip {
	cursor: pointer;

	&:focus-visible {
		@include focus_ring;
	}

	@include hover_touch {
		color: $color-text-light;
		background: $surface-panel-strong;
		border-color: $color-secondary;
	}
}