/* ==========================================================================
 * # Chip
 * --------------------------------------------------------------------------
 * Classes: .chip  .chip .x  .chip-add
 *
 * Rounded and outlined, for values inside forms. The x button sits in a grey
 * circle and needs an aria-label ("Remove 2:00 pm"). .chip-add is the dashed
 * "add a value" button.
 * ========================================================================== */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 36px;
	padding: 0 4px 0 12px;
	border-radius: 999px;
	border: 1px solid var(--field);
	background: var(--surface);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;

	& .x {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin-left: 4px;
		border: 0;
		border-radius: 50%;
		background: var(--neutral-bg);
		color: var(--ink-2);
		cursor: pointer;
		padding: 0;

		&:hover {
			background: var(--pri-tint);
			color: var(--pri);
		}
	}
}

.chip-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1.5px dashed var(--pri);
	background: transparent;
	color: var(--pri);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;

	&:hover {
		background: var(--pri-tint);
	}
}