@use '../../base/functions' as *;

$shading: with-opacity(var(--ui-soft), 20);
$tinting: with-opacity(var(--action), 10);
$tinting-dark: with-opacity(var(--action-secondary), 10);

.chip {
	font-weight: 700;
	border-width: 0.0625rem;
	border-style: solid;
	border-radius: var(--radius-extra-large);
	display: inline-flex;
	place-items: center center;
	max-width: max-content;
	padding: var(--padding-extra-small) var(--padding-small);
	outline: transparent solid 0.1875rem;
	position: relative;
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast);
	user-select: none;
	width: 100%;
	color: var(--ui-text);
	background-color: var(--ui-fill);
	border-color: var(--ui-text);

	// These should probably be aliased int base colors like red/yellow/whatever
	&.red {
		border: none;
		background-color: var(--color-salmon);
		color: var(--ui-text);
	}

	&.orange {
		border: none;
		background-color: var(--color-tiger);
		color: var(--ui-text);
	}

	&.yellow {
		border: none;
		background-color: var(--color-daffodil);
		color: var(--color-black);
	}

	&.blue {
		border: none;
		background-color: var(--color-electric-blue);
		color: var(--ui-text);
	}

	&.purple {
		border: none;
		background-color: var(--color-lavender);
		color: var(--ui-text);
	}

	&.green {
		border: none;
		background-color: var(--color-vibe);
		color: var(--ui-text);
	}

	&.grey {
		border: none;
		background-color: var(--color-steel);
		color: var(--ui-text);
	}

	&.pink {
		border: none;
		background-color: var(--color-bubblegum);
		color: var(--ui-text);
	}

	.dismiss {
		&::after {
			color: var(--action);
			background-color: $tinting-dark;
			content: '\e916'; // icon-close
			font-family: brandui-icons;
			font-style: normal;
			font-size: inherit;
			margin: 0 0 0 var(--padding-thin);
			padding: var(--padding-thin);
			display: block;
			border-radius: 100%;
			transform: rotate(45deg);
			cursor: pointer;
			transition:
				color var(--transition-fast),
				background-color var(--transition-fast);
		}
	}

	&.active {
		box-shadow: 0 0.625rem 0.938rem $shading;
		color: var(--color-action-contrast);
		background-color: var(--color-action);
		border-color: var(--color-action);

		// -webkit-text-stroke: .06ex currentColor;

		> * {
			color: var(--color-action-contrast);
		}

		.dismiss {
			&::after {
				color: var(--action);
				background-color: var(--ui-fill);
				transform: rotate(0deg);
			}
		}
	}

	&.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	&.beta {
		padding: 8px;
		margin: 0 6px;
		height: 18px;
		min-height: 0;
		max-height: 18px;
		font-size: 10px;
		box-shadow: none;
		transform: translateY(-2px);

		&:hover,
		&:focus {
			outline: none;
		}
	}
}

a.chip {
	text-decoration: none;

	&:hover,
	&:focus {
		color: var(--action);
		background-color: var(--tinting);
		border-color: var(--action);

		// -webkit-text-stroke: .06ex currentColor;
	}
}