$lui-chip-border: none;
$lui-chip-bgcolor: $grey-300;
$lui-chips-input-border-bottom: 1px solid $grey-300;
$lui-chips-shadow: none;

.lui-chips-wrap {
	overflow: hidden;

	.lui-paper, 
	.lui-text-field, 
	.lui-paper-z-depth-bottom, 
	.lui-paper-z-depth-1 {
		background: transparent;
		box-shadow: none !important;
		border-bottom: $lui-chips-input-border-bottom;
	}

	& input {
		box-shadow: none;
		background: transparent;
	}
}

.lui-chip-zone {
	background-color: transparent;

	.lui-has-chips {
		background-color: transparent;
	}
	
	.lui-chip {
		display: inline-block;
		margin: 5px 5px 0 0;
		padding: 4px 11px 2px 11px;
		border: $lui-chip-border;
		border-radius: 1em;
		background-color: $lui-chip-bgcolor;
		box-shadow: $lui-chips-shadow;

		p {
			display: block;
			margin: 0;
			padding: 0;
		}

		.lui-chip-icon {
			color: $grey-600;
			margin: 0;
			padding: 0 0 0 3px;
			top: 1px;
			height: 1em;
			width: 1em;

			&:hover {
				color: $grey-900;
				cursor: pointer;
			}
		}
	}
}

// small chips for inside table cells
.chip-small {
	display: inline-block;
	padding-right: 3px;
	border: none;
	margin: 0;

	p {
		display: block;
		margin: 0;
		padding: 0;

		&:after { // add commas between chip-small
			content: ",";
			display: inline-block;
			margin-left: -.15em; // tuck that comma in nice and tight
		}
	}

	button.lui-icon-button { // hide the close button until hovered 
		display: none;
	}

	&:hover {
		.lui-icon-button {
			color: $grey-900;
			margin: 0;
			padding: 0;
			top: 0;
			height: 1em;
			width: 1em;
			cursor: pointer;
			display: inline;
		}
	}

	&:last-of-type { // remove comma from last chip-small
		p {
			&:after {
				content: "";
			}
		}
	}
}