/*********************************************
 * Styles der floatingLabel-Klasse
 *
 * Aufbau eines floating-Eingabefeldes
 *
 *  Gesamtcontainer (".gaia__input-container")
 *
 *     - Container  (".gaia__input-float-container")
 *       zur Aufnahme des "floating" Labels, des Eingabefeldes
 *       und ev. noch Steuericons (Fehlericons, Löschicon, Klartexticon),
 *       ohne Nachrichtenbox
 *
 *     - Container (".gaia__input-float-container-message")
 *       mit Nachrichtenbox
 *
 * extern definierte Styles:  s.styles.css
 *   :root
 *   .barrier-free
 *   [role=tooltip][aria-hidden=true]
**/

/********************************************/
/**             Eingabecontainer           **/
/********************************************/

/**
  * Gesamtcontainer für komplexe Eingabefeld und Nachrichtenbox
  * @see .gaia__input-float-container
  * @see .gaia__input-float-container-message
  */
.gaia__input-container {
	box-sizing: border-box;
	width: min-content;
	font-family: Roboto Reg; /*Arial, Helvetica, sans-serif;*/
	margin: var(--commonDistance);
	/*background-color: lightgoldenrodyellow;*/
}

/**
  Container zur Aufnahme der Nachrichtenbox, erscheint unterhalb
  des "input-float"-Containers
  @see .gaia__input-float-container
 */
.gaia__input-float-container-message {
	font-size: var(--gaia-font-size);
}

.gaia__input-container .gaia__input-float-container-message.show {
	display:block;
	visibility: visible;
	/*max-height: 3000px;
	transition: max-width var(--gaia-transition-duration) var(--gaia-transition-timing-function);*/
}

.gaia__input-container .gaia__input-float-container-message.hide {
	display:block;
	visibility: hidden;
	/*max-height: 0;
	overflow: hidden;
	transition: max-height var(--gaia-transition-duration) var(--gaia-transition-timing-function);*/
}

/**
  Container zur Aufnahme des "floating" Labels, des Eingabefeldes
  und ev. noch Steuericons (Fehlericons, Löschicon, Klartexticon),
  ohne Nachrichtenbox
  @see
 */
.gaia__input-float-container {
	position: relative;
	width:min-content;
}

.gaia__input-float-container.label_outside {
	margin-top: calc(var(--gaia-font-size) * 3);
}

.gaia__input-float-container.label_online {
	margin-top: calc(var(--gaia-font-size) * 1.5);
}

.gaia__input-float-container.label_inside {
	margin-top: calc(var(--gaia-font-size) * 1);
}

/* label und Eingabefeld */
.gaia__input-float-container label,
.gaia__input-float-container .inputOrTextarea {
	color: rgb(var(--baseColor1));
	background-color: rgb(var(--baseColor0));
	border:0;
	font-size: var(--gaia-font-size);
}

/*****************  Label **********************/

.gaia__input-float-container label {
	position: absolute;
	display: inline-flex;
	align-items: center;
	/* Label beginnt an der gleichen Position (top left) wie der
	   eigentliche Wert des Eingabefeldes.*/
	transform-origin: top left;
	transform: translate(0, 25%) scale(1); /* vertical zentriert */
	transition: all var(--gaia-transition-duration) var(--gaia-transition-timing-function);
	padding-top: calc(var(--gaia-font-size) / 4);
	padding-bottom: calc(var(--gaia-font-size) / 4);
	padding-left: calc(var(--gaia-font-size) / 2);
	padding-right: calc(var(--gaia-font-size) / 2);
	/* wegen Rand etwas nach rechts versetzen */
	margin-left: calc(var(--gaia-font-size) / 6);
	color: var(--gaia-font-color);
	font-weight: normal;
	/*border:1px solid red;*/
}

/** Label nach oben verschieben und ev. Fontgröße auf 3/4
	der originalen Größe reduzieren, wenn das Eingabefeld
	einen Wert besitzt.
*/

/* Label nach oben, außerhalb des Containers schieben */
.gaia__input-float-container.moveLabel label.outside {
	color: var(--gaia-font-color);
	background-color: transparent;
	transform: translate(0, calc(var(--gaia-font-size) * -2.25)) scale(1);
	margin-left:0;
	padding-left:0;
}

/* Label nach oben auf obere Begrenzungslinie des Containers schieben */
.gaia__input-float-container.moveLabel label.online {
	color: var(--gaia-font-color);
	background-color: var(--gaia-background-color2);
	transform: translate(calc(var(--gaia-font-size) / 2), calc(var(--gaia-font-size) / -1.0)) scale(0.75);
	padding-left: calc(calc(var(--gaia-font-size) / 2 ) / 0.75);
	padding-right: calc(calc(var(--gaia-font-size) / 2 ) / 0.75);
	font-weight: normal;
	/* background-color: green; */
}

/* Label nach oben, unterhalb der oberen Begrenzungslinie des Containers schieben */
.gaia__input-float-container.moveLabel label.inside {
	color: var(--gaia-font-color);
	transform: translate(0, calc(var(--gaia-font-size) / 4)) scale(0.75);
}

/* padding wird durch transform s.o. auch verändert */
.gaia__input-float-container.moveLabel label {
	/*padding-left: calc(calc(var(--gaia-font-size) / 2 ) / 0.75);
	padding-right: calc(calc(var(--gaia-font-size) / 2 ) / 0.75);*/
	/*background-color:green;*/
}

/* einem Label kann ein Symbol vorangestellt werden */
/* allgemein s.a. .icon-sym-awe_mnu */
.gaia__input-float-container label::before {
	/*font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: var(--gaia-font-size);
	padding-right:12px;
	width: 20%;
	background-color:yellow;
	border: 1px solid red;*/
	display:none;
}

/* Nutzer */
.gaia__input-float-container label.__user::before {content: "\F007"}
/* Kennwort */
.gaia__input-float-container label.__password::before {content: "\1F511"}
/* email */
.gaia__input-float-container label.__email::before {content: "\2709"}
/* Telefon */
.gaia__input-float-container label.__telefon::before {content: "\1f4de"}
/* Kartentitel */
.gaia__input-float-container label.__mapTitle::before {content: "\1f5fa"}
/* Untertitel */
.gaia__input-float-container label.__mapSubTitle::before {content: "\1f5fa"}
/* Stempelfeld */
.gaia__input-float-container label.__stamp::before {content: "\f5bf"}
/* Copyright */
.gaia__input-float-container label.__copyright::before {content: "\a9"}

/* Label kann checkbox enthalten */
.gaia__input-float-container label input[type=checkbox]
{
	transform: scale(calc(var(--gaia-font-size_real) / 16));
	margin-right: calc(var(--gaia-font-size) / 2);
}

/*****************  Eingabefeld **********************/

.gaia__input-float-container .inputOrTextarea {
	/* transparenten box-shadow und ... , damit Box nicht "wackelt",
	   wenn sie Focus erhält bzw.aktiviert wird */
	box-shadow: -1px -1px 10px rgba(0, 0, 0, 0), 1px 1px 10px rgba(0, 0, 0, 0);
	border-width: var(--gaia-active-border-width);
	border-color: var(--gaia-font-color);
	border-style: solid;

	border-radius: var(--gaia-btns-border-radius);
	outline: 0;
	padding-top: var(--gaia-font-size);
	padding-right: calc(var(--gaia-font-size) / 2);
	padding-left: calc(var(--gaia-font-size) / 2);
	padding-bottom: calc(var(--gaia-font-size) / 2);
	/*padding-bottom:	calc(var(--gaia-font-size) / calc(var(--gaia-font-size) / 10));*/
	/* fill the complete container */
	width:auto;
	color: rgb(var(--baseColor1));
	background-color: rgb(var(--baseColor0));
}

/*padding-bottom: calc(var(--gaia-font-size) / 2.4);*/

.gaia__input-float-container.moveLabel label.outside ~ .inputOrTextarea,
.gaia__input-float-container label.outside ~ .inputOrTextarea:focus {
	padding-top: calc(var(--gaia-font-size) / 2);
	padding-bottom: calc(var(--gaia-font-size) / 2);
	/*background-color:antiquewhite!important;*/
}
.gaia__input-float-container.moveLabel label.online ~ .inputOrTextarea,
.gaia__input-float-container label.online ~ .inputOrTextarea:focus {
	padding-top: calc(var(--gaia-font-size) / 2);
	padding-bottom: calc(var(--gaia-font-size) / 2);
	/*background-color:yellow!important;*/
}
.gaia__input-float-container.moveLabel label.inside ~ .inputOrTextarea,
.gaia__input-float-container label.inside ~ .inputOrTextarea:focus {
	padding-top: calc(var(--gaia-font-size) / 0.75);
	/*background-color:lightsalmon!important;*/
}

/** Hervorhebung Eingabefeld und Checkbox*/
.gaia__input-float-container .inputOrTextarea:not([disabled]):hover,
 .gaia__input-float-container input[type=checkbox]:hover {
	 box-shadow: -1px -1px 10px var(--gaia-font-color), 1px 1px 10px var(--gaia-font-color);
	/* damit Box nicht "wackelt" */
	border-color: rgba(0, 0, 0, 0);
 }

.gaia__input-float-container .inputOrTextarea:focus,
.gaia__input-float-container .inputOrTextarea:active,
.gaia__input-float-container input[type=checkbox]:focus,
.gaia__input-float-container input[type=checkbox]:active
{
	box-shadow: -1px -1px 10px var(--gaia-font-color), 1px 1px 10px var(--gaia-font-color);
	border-width: var(--gaia-active-border-width);
	border-color: var(--gaia-active-border-color);
	border-style: solid;
}

.gaia__input-float-container .inputOrTextarea[disabled] {
	/*cursor: default!important;*/
	/*color: var(--gaia-disable-color)!important;*/
	/*border-color: var(--gaia-disable-color)!important;*/
	border-color: var(--gaia-background-color)!important;
	pointer-events:none!important;
	touch-action:none!important;
}

/*****************  Steuersymbole **********************/

/** Hervorhebung Eingabefeld mit Icon, wenn Eingabe fehlerhaft */
.gaia__input-float-container .inputOrTextarea:invalid {
	border-color: var(--gaia-error-color);
	box-shadow: -1px -1px 10px var(--gaia-error-color), 1px 1px 10px var(--gaia-error-color);
	/*padding-right: calc(2.5em + .75rem);
	background-image: var(--gaia-error_symbol);
	background-repeat: no-repeat;
	background-position: right calc(calc(.375em + .1875rem) * 3) center;
	background-size: calc(.75em + .375rem) calc(.75em + .375rem);*/
}

/**
  Container, der das Eingabefeld umschließt,
  kann mehrere Steuersymbole in einem eigenen
  Container enthalten !
 */

/* Container für Steuersymbole am rechten Rand anordnen */
.gaia__input-float-container input ~ span,
.gaia__input-float-container textarea ~ span
{
	position: absolute;
	display: inline-flex;
	align-items: center;
	height: 100%;
	/* ohne right = 0 würde span rechts
	   neben dem Eingabefeld erscheinen */
	right: 0;
}

/**
  button-Tag mit Steuersymbol
 */
.gaia__input-float-container span button {
	display: inherit;
	height: inherit;
	border:0;
	padding:0;
	cursor:pointer;
	margin-left: calc(var(--gaia-font-size) / 2 );
	margin-right: calc(var(--gaia-font-size) / 2 );
	background-color:transparent;
	/*background-color:yellow;*/
}

/** Steuersymbol selbst */
.gaia__input-float-container span button {
	stroke-width: 3;
	stroke: rgb(var(--baseColor1));
	fill:none;
	width: calc(var(--gaia-font-size) * 2)!important;
	height: calc(var(--gaia-font-size) * 2)!important;
}

/* @TODO Steuersymbole für INPUT vertical zentriert anordnen */
.gaia__input-float-container input ~ span button {
	align-items: center!important;
}

/* @TODO Steuersymbole für TEXTAREA oben anordnen */
.gaia__input-float-container textarea ~ span button {
	align-items: baseline!important;
}

/** Steuersymbol hervorheben */
.gaia__input-float-container span button:hover,
.gaia__input-float-container span button:focus,
.gaia__input-float-container span button:active {
	stroke: rgb(var(--baseColor0));
	background-color: rgb(var(--baseColor1));
}

/**
   Schade, dann wäre css-Klasse hasValue überflüssig und es könnte alles
   über css gesteuert werden.
	Updating the value of a field does not update its value attribute
   in the DOM so that's why your selector is always matching a field,
	even when it's not actually empty.
	If you cahnge attribut (value) style will not cahnge.
*/
/*.gaia__input-float-container input:not([value=""]) ~ span .gaiaSvgDelete svg,
.gaia__input-float-container textarea:not(:empty) ~ span .gaiaSvgDelete svg   {*/
/*background-color:blue;*/
/*display:inline;*/
/*	stroke: blue;
	stroke-width: 10;
}*/
/*.gaia__input-float-container input[value=""] ~ span .gaiaSvgDelete svg,
.gaia__input-float-container textarea:empty ~ span .gaiaSvgDelete svg {*/
/*background-color:red;*/
/*display:none;*/
/*stroke: red;*/
/*	stroke: none;
	stroke-width: 10;
}*/

/* wenn Eingabecontainer Focus verliert, Eingabefeld leer oder gesperrt ist */
.gaia__input-float-container.hasValue:not(:focus-within) .gaiaSvgDelete,
.gaia__input-float-container.hasValue:focus-within .inputOrTextarea[disabled] ~ span .gaiaSvgDelete,
.gaia__input-float-container .gaiaSvgDelete {
	display:none;
}
/* wenn Eingabecontainer Focus bekommt und Eingabefeld nicht leer ist */
.gaia__input-float-container.hasValue:focus-within .gaiaSvgDelete {
	display:inline;
}