/* container for a input within a form, e.g. wasserpegelstation-ID or login */
.input-form {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.input-form p {
  text-align: center;
}
.input-form h3 {
  text-align: center;
  margin-bottom: -6px;
}

/* Container for a input field with animated label */
.input-field-container {
    position: relative;
    margin-top: 20px;
}

/* Styles for the label */
.input-field-label {
    position: absolute;
    top: 52%;
    width: 100%;
    left: 0%;
    transform: translateY(-50%); /* Center label vertically */
    transition: all 0.3s ease; /* Smooth transition for label movement */
    transform-origin: left;
    color: var(--label-color);
    font-size: 1em; /* Adjust font size if needed */
    font-weight: 500;
    pointer-events: none; /* Prevent interaction with the label */
    padding: 0 4px; /* Add padding to prevent text overlap */
}

/* styles for the input field */
.input-field {
    border: none;
    border-bottom: 2px solid var(--input-border-color);
    font-size: 1em; /* Font size for input text */
    font-weight: 600;
    letter-spacing: 0.5px;
    outline: none; /* Remove default outline */
    padding: 6px 2px; /* Adjust padding to make space for the label */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

.input-field-container svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* move the label up when input is focused or has a value */
.input-field:focus + .input-field-label,
.input-field:valid + .input-field-label,
.input-field:read-only + .input-field-label {
    top: -14px; /* Move the label above the input field */
    transform: scale(0.75); /* Scale down label when focused */
    color: var(--label-focus-color); /* idk why the variable isn't working though */
}

/* styles for placeholder */
.input-field::placeholder {
    color: transparent; /* Hide placeholder initially */
}

/* show placeholder when label is not in the focus position */
.input-field:not(:focus)::placeholder {
    color: var(--input-placeholder-color); /* Gray color for placeholder */
}

/* Entfernen der Pfeile für numerische Eingaben */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Entfernt die Pfeile in Webkit-Browsern (Chrome, Safari) */
}

input[type="number"] {
    -moz-appearance: textfield; /* Entfernt die Pfeile in Firefox */
}

/* Entfernen der Pfeile für Datumsfelder */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Entfernt die Pfeile in Webkit-Browsern (Chrome, Safari) */
}

input[type="date"] {
    -moz-appearance: textfield; /* Entfernt die Pfeile in Firefox */
}