.textfield{

	//border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 

	& > .elem::placeholder {
	  @include font(body1, $c-b); 
	  margin-top: 8px;
	  font-weight: 300;
	  opacity: 0.36;
	}


	& > .label {
		position: absolute;
		display: inline;
		top: 16px;
		left: 12px;
		width: calc(100% - 48px );

		@include selectNo;
		@include font(subtitle1, $c-b);
		font-weight: 300;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		//border: 0.2px solid yellow;               //←←←←←←←←←←←←←←←←←←←← 
	}




	& > .helper {
		position: absolute;
		bottom: 0px;
		left: 12px;
		width: calc(100% - 48px - 48px);
		@include font(caption, $c-b);
		opacity: 0.87;
		@include selectNo;
		//border: 0.2px solid blue;               //←←←←←←←←←←←←←←←←←←←← 
	}


	& > .counter {
		position: absolute;
		bottom: 0px;
		right: 12px;
		width: 48px;
		@include font(caption, $c-b);
		opacity: 0.87;
		@include selectNo;
		//border: 0.2px solid blue;               //←←←←←←←←←←←←←←←←←←←← 

	}

	& > .trailing{
		position: absolute;
		height: 32px;
		width: 32px;

		right: 8px;
		top: 12px;
		top:-10px;
		cursor: pointer;
		@include centerFlex;
		opacity: 0.16;
		transform: scale(0) rotate(-360deg) ;

			& svg{
				height: 24px;
				width: 24px;
				display: block;
				fill: $c-b;
				opacity: 0.32;
				@include selectNo;
				//border: 0.5px solid yellow;           //←←←←←←←←←←←←←←←←←←←←  
			}

		//border: 0.2px solid blue;               //←←←←←←←←←←←←←←←←←←←← 
	}

	& > .restriction {
		position: absolute;
		display: inline-block;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 0%;
		//max-height: 24px;
		background-color: $c-error;
		opacity: 0.0;
		// border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 
	}


}


.textfield-restriction{
	& > .restriction {
		height: 100% !important;
		opacity: 0.06 !important;;
	}
}