/* Chip selection UI */
div.selected_chips {
	width:100%;
	min-height:60px;
	border-radius:var(--radius-tight);
	border:var(--divider-light);
	padding:var(--margin-xs);
	position:relative;
	}
	
	div.selected_chips input.freeform_chip {
	    display: inline-block;
	    border: none;
	    padding: 4px 8px;
	    margin: 2px;
	    border-radius: 4px;
	    box-shadow:inset 1px 1px 1px rgb(0,0,0,.2);
	    border:1px solid var(--color-purple);
	    color:var(--color-purple);
	    font-size: 14px;
	    outline: none;
	    width: 220px;
	    max-width:auto;
		}

div.available_chips {
	margin-top:var(--margin-m);
	}
	
div.chip {
	position:relative;
	border-radius:var(--radius-tight);
	background-color:var(--color-purple);
	color:white;
	font-weight:400;
	letter-spacing:.01em;
	font-size:12px;
	text-align:left;
	padding:1px var(--margin-l) 0px var(--margin-xxs);
	display:inline-block;
	line-height:24px;
	margin:0px var(--margin-xs) var(--margin-xs) 0px;
	cursor:pointer;
	transition:.2s;
	}
	
	div.chip::before {
		content:"+";
		display:block;
		position:absolute;
		top:var(--margin-xxs);
		right:var(--margin-xxs);
		height:14px;
		line-height:14px;
		text-indent:3px;
		font-size:16px;
		font-weight:700;
		width:14px;
		background-color:rgb(255,255,255,.3);
		border-radius:10px;
		color:white;
		opacity:.8;
		}
		
	div.chip:hover {
		filter:brightness(130%);
		box-shadow:var(--shadow);
		}
		
		div.chip:hover span {
				opacity:1;
				}
	
	div.chip.dimmed {
		opacity: 0.5;
		pointer-events: none;
		}
	
	div.selected_chips div.chip {
		background-color:var(--color-blue);
		}
	
		div.selected_chips div.chip.all {
			background-color:var(--color-dark);
			padding:1px var(--margin-xs) 0px var(--margin-xs);
			}
			
			div.selected_chips div.chip.all:before {
				display:none;
				}
		
			div.selected_chips div.chip.all.hidden {
				display:none;
				}
	
		div.selected_chips div.chip:hover {
			background-color:var(--color-red);
			}
	
		div.selected_chips div.chip.all:hover {
			background-color:var(--color-dark);
			filter:brightness(100%);
			box-shadow:none;
			cursor:default;
			}
		
		div.selected_chips div.chip:before {
			transform:rotate(45deg);
			}
			
div.chip_control {
	width:100%;
	border:none !important;
	background-color:var(--color-very-light);
	border-radius:var(--radius-tight);
	padding:var(--margin-s);
	margin-top:var(--margin-m);
	margin-bottom:var(--margin-m);
	height:calc(var(--button-height) + (var(--margin-s) * 2));
	}
	
	div.chip_control select {
		width:30%;
		display:inline-block;
		padding:var(--margin-s);
		margin-right:var(--margin-s);
		height:var(--button-height);
		outline:1px solid var(--color-medium);
		}

	div.chip_control p {
		display:inline-block;
		line-height:30px;
		margin-right:var(--margin-s);
		height:var(--button-height);
		}