<script setup>
// 常用属性：
//   label - 标签显示的文字内容
//   outlined - 显示有边框的样式
//   size - 尺寸，目前仅支持 "small"

import Chip from "primevue/chip";

const props = defineProps({
	outlined: undefined,
	size: undefined
})

</script>

<template>
	<Chip :class="{outlined: outlined !== undefined, small: size === 'small', tiny: size=='tiny'}">
		<span><slot></slot></span>
	</Chip>
</template>

<style lang="postcss" scoped>
.p-chip.outlined {
	border: 1px var(--p-gray-300) solid;
	padding: calc(var(--p-chip-padding-y) - 1px) calc(var(--p-chip-padding-x) - 1px);
	background: white;
	/* style test */
	background: #F5F8FF;
    color: #657080;
	@apply dark:bg-black;
}

.p-chip.outlined:hover {
	background: var(--p-primary-50);
	@apply dark:bg-gray-700;
}

.p-chip {
	padding: calc(var(--p-chip-padding-y) * 0.8) calc(var(--p-chip-padding-x) * 0.8);
}

.p-chip.small {
	font-size: 0.9em;
	padding: calc(var(--p-chip-padding-y) * 0.6) calc(var(--p-chip-padding-x) * 0.8);
}

.p-chip.tiny {
	font-size: 0.8em;
	padding: calc(var(--p-chip-padding-y) * 0.5) calc(var(--p-chip-padding-x) * 0.7);
}

.p-chip :deep(i) {
	font-size: 0.8em;
	color: var(--p-chip-color);
}

.p-chip.red {
	@apply text-red-400 border-red-400 dark:text-red-500 dark:border-red-500;
}

.p-chip.red :deep(i) {
	@apply text-red-400 dark:text-red-500;
}

.p-chip.olive {
	@apply text-lime-500 border-lime-500 dark:text-lime-500 dark:border-lime-500;
}

.p-chip.olive :deep(i) {
	@apply text-lime-500 dark:text-lime-500;
}

.p-chip.green {
	@apply text-emerald-500 border-emerald-500 dark:text-emerald-600 dark:border-emerald-600;
}

.p-chip.green :deep(i) {
	@apply text-emerald-500 dark:text-emerald-600;
}

.p-chip.blue {
	@apply text-blue-500 border-blue-500;
}

.p-chip.blue :deep(i) {
	@apply text-blue-500;
}

.p-chip.gray, .p-chip.grey {
	@apply text-gray-500 border-gray-300 dark:text-gray-300 dark:border-gray-600;
}

.p-chip.disabled {
	@apply text-gray-300 border-gray-200;
}
</style>