.value {
	margin-bottom: 2px;
	margin-right: 2px;
	/* nasty !important needed to override the material 32px */
	height: 28px !important;
}

.selectedIcon {
	margin-right: 8px;
}

.root.hasValue .inputLeading {
	position: relative;
	pointer-events: unset;
	margin-left: 0;
}

.values .value {
	margin: 4px 4px 4px 0;
}

.root .label {
	z-index: 1;
}

.root.hasValue .input {
	display: inline-block;
	width: 100%;
	padding: 8px 28px 12px;
}

.root.hasValue .wrapper {
	height: auto;
	flex-flow: row wrap;
}

.root.noLabel.hasValue .wrapper {
	padding-top: 12px;
}

.root.hasLabel .defaultKind .input {
	padding-top: 12px;
}

.root.hasLabel.hasValue .defaultKind {
	padding-top: 28px;
}

.root.hasLabel.hasValue .defaultKind .inputLabel {
	position: absolute;
	width: 100%;
	left: -24px;
}

.root.hasLabel .defaultKind::before {
	height: 0;
}

.root.hasLabel.hasValue .outlinedKind .inputLabel {
	position: relative;
	top: -14px;
	left: 4px;
}

.root.hasLabel.hasValue .outlinedKind .label {
	transition: unset;
	transform: translateY(-34.75px) !important;
	font-size: 0.75rem !important;
	left: 0;
	top: 38px;
}

.values {
	padding-left: 16px;
}

.labelActive {
	composes: mdc-floating-label--float-above from '@material/textfield/dist/mdc.textfield.css';
}

.notchActive {
	composes: mdc-notched-outline--notched from '@material/textfield/dist/mdc.textfield.css';
}

.inputLeadingWrapper {
	padding-left: 8px;
}

.outlinedKind .inputLeadingWrapper {
	margin-top: 16px;
}
