/* HTML examples:
JAB custom form component inspired by Bootstrap form component, but with less options/possibilities: https://getbootstrap.com/docs/5.3/forms/overview/

<div>
	<label for="exampleInputEmail1" class="jab-forms-label">Email address</label>
	<input type="email" class="jab-forms-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>

<div class=jab-forms-check">
	<input type="checkbox" class="jab-forms-check-input" id="exampleCheck1">
	<label class="jab-forms-check-label" for="exampleCheck1">Check me out</label>
</div>

<div class="jab-forms-check">
  <input class="jab-forms-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="jab-forms-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div>
  <label for="exampleFormControlTextarea1" class="jab-forms-label">Example textarea</label>
  <textarea class="jab-forms-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div> */

:root {
    --jab-forms-check-padding-start: 30px;
    --jab-forms-border-color: #000;
    --jab-forms-color: #000;
    --jab-forms-color-background: #fff;
    --jab-forms-color-background-checked: #000;
    --jab-forms-check-bg-image-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.jab-forms-control {
    font-size: 0.875em;
    display: block;
    width: 100%;
    padding: 10px;
    color: var(--jab-main-text);
    background-color: var(--jab-forms-color-background);
    background-clip: padding-box;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--jab-forms-border-color);
    appearance: none;
    /* Fix appearance for date inputs in Safari */
}

.jab-forms-label {
    font-size: 0.875em;
    color: var(--jab-forms-color);
}

.jab-forms-check {
    display: block;
    padding-left: var(--jab-forms-check-padding-start);
}

.jab-forms-check .jab-forms-check-input {
    float: left;
    margin-left: calc(var(--jab-forms-check-padding-start) * -1);
}

.jab-forms-check-input {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--jab-forms-border-color);
    border-radius: 50%;
    vertical-align: top;
    margin-top: 0.25rem;
    background-color: var(--jab-forms-color-background);
    appearance: none;
}

.jab-forms-check-input:checked {
    background-image: var(--jab-forms-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--jab-forms-check-bg-image-checked);
    background-color: var(--jab-forms-color-background-checked);
}

.jab-forms-check-label {
    color: var(--jab-forms-color);
    cursor: pointer;
}

.jab-forms-check-input:checked+label {
    font-weight: 700;
}

.jab-form label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(10px, 10px);
    transition: all var(--jab-global-transition-time) ease-out;
    cursor: auto;
    color: #858788 !important;
}

.jab-form input {
    padding: 10px;
    width: 100%;
}

.jab-form input:not(:placeholder-shown)+label,
.jab-form input:focus+label {
    font-size: 10px;
    letter-spacing: 1.0px;
    transform: translate(0, -10px);
}

.jab-form input::placeholder,
.jab-form input::-webkit-input-placeholder {
    color: #858788;
}

.jab-form input,
.jab-form input:focus-visible {
    border: none;
    outline: none;
}

.jab-form {
    margin-top: 20px;
    position: relative;
    border-bottom: 1px solid #000000;
}

.jab-form:has(input:placeholder-shown) {
    border-color: #858788;
}

.jab-form:has(input:focus) {
    border-bottom: 1px solid #000000;
}

.jab-form i {
    height: 16px;
    width: 16px;
}

.jab-form a {
    padding-right: 10px;
}

.jab-form .jab-password-show {
    cursor: pointer;
}

.jab-form select.jab-selectform {
  border: unset;
  padding-left: 10px;
  height: 41px;
  background-position: right 10px top 18px;
  background-size: 12px auto;
  color: var(--jab-main-text);
}
.jab-form select.jab-selectform option {
  color: var(--jab-main-text);
}
.jab-form:has(select.jab-selectform):has(option:disabled:checked[hidden]) {
  border-color: #858788!important;
}
.jab-form select.jab-selectform + label {
  transform: translate(0, -8px)!important;
}
.jab-form select.jab-selectform:has(option:disabled:checked[hidden]) + label {
  transform: translate(10px, 10px)!important;
}
input:checked + label {
  color: var(--jab-main-text)!important;
}
input:checked + .jab-label-normal {
  font-weight: 300!important;
}
input + .jab-label-normal {
  padding-left: 0.5rem;
}
textarea + label {
  transform: translateY(-32px);
  font-size: 10px;
}
textarea {
  resize: none;
}
.jab-form.is-invalid {
  border-color: var(--bs-danger) !important;
}
.jab-form.is-invalid input, .jab-datecheck-errormessage, .jab-datecheck-errormessage small {
  color: var(--bs-danger) !important;
}
.jab-form.is-invalid input::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(19%) sepia(94%) saturate(6437%) hue-rotate(339deg) brightness(94%) contrast(83%);
}