.uni-chip {

	&__icon {
        margin-right: $basic-padding / 6;
	}

    &__label {
        line-height: 1;
    }

    &__icon-remove {
		position: absolute;
		@include center(y);
		right: 5px;

		line-height: 0;
		opacity: 0.5;

        &:hover {
            opacity: 1;
        }
    }

	&__inner {

		@include border-radius;

		background-color: $color-grey-medium;
		font-size: $font-small;
		padding: $basic-padding / 10 $basic-padding / 5;

		&--removable {
			padding-right: 30px;
		}

		&--primary {
			background-color: $color-primary;
			color: white;

			.uni-chip__icon,
			.uni-chip__icon-remove {
				@include invert;
			}
		}

		&--success {
			background-color: $color-success;
			color: white;

			.uni-chip__icon,
			.uni-chip__icon-remove {
				@include invert;
			}
		}

		&--warning {
			background-color: $color-warning;
			color: white;

			.uni-chip__icon,
			.uni-chip__icon-remove {
				@include invert;
			}
		}

		&--error {
			background-color: $color-error;
			color: white;

			.uni-chip__icon,
			.uni-chip__icon-remove {
				@include invert;
			}
		}
	}
}