:root {

	--color-phantom-tooltip: black;
	--color-textPhantom-tooltip: white;
	--color-phantom: white;
	--color-danger-LimitPTS: var(--color-danger-S360);
	--color-activeGrag: #1e7e34;
	--color-containMessage: #016275;

	&[data-theme='light'] {
		--color-active-Grag: #c7b693;
		--color-phantom: white;
		--color-phantom-tooltip: black;
		--color-textPhantom-tooltip: white;
		-color-danger-LimitPTS: var(--color-danger-S360);
		--color-activeGrag: #1e7e34;
		--color-containMessage: #016275;
	}
	&[data-theme='dark'] {
		--color-active-Grag: #c7b693;
		--color-phantom: #c7d3df;
		--color-phantom-tooltip: #c7d3df;
		--color-textPhantom-tooltip: black;
		--color-danger-LimitPTS: #821018;
		--color-activeGrag: #1e7e34;
		--color-containMessage: #016275;
	}
}


.textLabel{
	border: 1px solid var(--color-border-S360);
	border-radius: var(--border-radius-S360);
	height: 30px;
	width: 100%;
	display: flex;
	align-items: center;
	user-select: none;
	cursor:default;

	.cuerpo {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;

		& span {
			border: none;
			outline: none;
			width: 100%;
			height: fit-content;
			background-color: var(--background-S360) !important;
			font-size: var(--font-size-normal-S360);
			color: var(--color-text-S360);
			padding: 9px 5px 0px 8px;

         max-width: 100%;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
				margin: 0; /* opcional */
			}

         & input {

         }
		}

		& label {
			width: 100%;
			font-size: var(--font-size-normal-S360);
			background-color: transparent;
			white-space: nowrap;
			overflow: hidden;
			color: var(--color-text-S360);
			padding-left: 8px;
			text-overflow: ellipsis;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: 0.08s ease all;
		}
	}

	position: relative;

	& .contenIconsInput {

		gap: 4px; /* Space between icons */
		position: absolute;
		right: -1px;
		width: 18px;
		display: flex;
		margin-top: 5px;

		& span {
			color: var(--color-border-S360);
		}

		& i {
			color: var(--color-border-S360);
		}

		& .material-symbols-outlined{
			font-size: calc(var(--font-size-normal-S360) + 2);
		}

		& .containeMessage{
			color: var(--color-containMessage) !important;
		}

		& .activedGrag{
			color: var(--color-activeGrag) !important;
		}
	}

	& .info_limites{
		position: absolute;
		background: #bdbbbb;
		right: -1px;
		width: 18px;
		border-radius: 0 4px 4px 0;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30px;
	}

  & .LimiteRojoInput{
    background-color: var(--color-danger-Tooltip) !important;
  }

  & .LimiteAmarilloInput{
    background-color: var(--color-warning-Tooltip) !important;
  }

  & .LimiteVerdeInput{
    background-color: var(--color-success-Tooltip);
  }

	&.colorInLimitsYellow{
		border: solid 2px var(--color-warning-S360) !important;
	}

	& .backgroundInLimitsYellow{
		background-color: var(--color-warning-S360) !important;
	}

	& .colorTextInLimitsYellow{
		color: var(--color-warning-S360) !important;
	}

	&.colorOutLimitsE{
		border: solid 2px var(--color-danger-LimitPTS) !important;
	}

	& .backgroundOutLimitsE{
		background-color: var(--color-danger-LimitPTS) !important;
	}

	& .colorTextOutLimitsE{
		color: var(--color-danger-LimitPTS) !important;
	}

	&.colorInLimitsGreen{
		border: solid 2px var(--color-success-S360) !important;
	}

	& .backgroundInLimitsGreen{
		background-color: var(--color-success-S360) !important;
	}

	& .colorTextInLimitsGreen{
		color: var(--color-success-S360) !important;
	}
}

.textLabel--focus{
	border: 1px solid var(--suite-primary-S360) ;
}

.textLabel--filled{
	& .cuerpo{
		& span{
			display: block;
		}
		& label{
			color: var(--color-text-secundary-S360);
			font-size: calc(var(--font-size-normal-S360) - 2px);
			font-weight: var(--font-weight-small-S360);
			top: 0%;
			left: 50%;
			transform: translate(-50%, 0%);
		}
	}
}

.textLabel--disabled{
	border: 1px solid var(--color-border-S360);
	border-color: var(--color-border-S360);
	background-color:var(--background-disabled-secundary-S360);
	& .cuerpo{
		& span{
			color: var(--color-text-disabled-S360);
			background-color: transparent !important;
		}

		& label{
			color: var(--color-text-disabled-S360) ;
		}
	}

	& .block-icon{
		font-size: var(--font-size-normal-S360);
		color:  var(--color-text-disabled-S360);
		padding-right: 10px;
	}
}

.textLabel--error{
	border-color: var(--color-error-S360);

	& .error-icon{
		color: var(--color-error-S360);
		padding-right: 10px;
		font-size: var(--font-size-normal-S360);
		font-variation-settings: "FILL" 1;
	}

	& label {
		color: var(--color-error-S360)!important;
	}
}

.textLabel--focus.textLabel--error{
	& label{
		color:var(--color-error-S360) ;
	}
}