@charset "utf-8";
/*

<div class="wrapper--floating-label input--long">
  <input class="input--text" type="text" placeholder="" aria-placeholder="" id="editModel_Address2" name="editModel.Address2" value="">
  <label class="floating-label" for="editModel_Address2">Address 2</label>
</div>

*/



.floating-label-v2:has(input:focus) span,
.floating-label-v2:has(input:not(:placeholder-shown):not(:focus)) span,
.floating-label-v2:has(input:-webkit-autofill:not(:focus)) span {
  padding: .25rem 0;
  font-size: .7em;
  opacity: 1;
  bottom: calc(100% - .5rem);
  left: 0;
  color: var(--color);
  background: var(--bg-color);
}

*:-webkit-autofill-selected {
  background: transparent;
}

.floating-label-v2 input {
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding: .5rem 0;
  border-radius: 0;
  width: 100%;
}

  .floating-label-v2 input:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .floating-label-v2 input::placeholder {
    color: transparent;
    font-weight: 300;
    font-style: italic;
    transition: all .2s;
  }

  /* .floating-label-v2:has([type="text"]:-webkit-autofill) {
  background-color: var(--government-lt);
  padding: 4rem;
  outline: 2px solid red;
} */

  .floating-label-v2 input:focus::placeholder {
    color: var(--gray-mid);
  }

  .floating-label-v2 input:empty {
    border-bottom-color: var(--contrast-more);
  }

  .floating-label-v2 input:not(:focus):not(:placeholder-shown) {
    border-bottom-color: #ddd;
    padding-left: 0;
  }


.floating-label-v2 {
  position: relative;
  padding: .25rem 0;
  border: 1px solid transparent;
  border-radius: 4px;
  width: fit-content;
}


  .floating-label-v2, .floating-label-v2 * {
    transition: all .2s;
  }

    /* .floating-label-v2:focus-within {  
  border: 2px solid var(--color);
  border-radius: 4px;
} */

    .floating-label-v2:has(input:focus) span:after {
      background: transparent;
      transition: none;
    }

    .floating-label-v2:has(input:placeholder-shown:not(:focus)) span {
      left: 0;
      bottom: 25%;
      padding: .25rem 0;
      letter-spacing: .2px;
      color: #777777;
    }

    .floating-label-v2:has(input:not(:focus):not(:placeholder-shown)) span {
      color: var(--contrast-less);
      left: 0px;
    }

    .floating-label-v2 span {
      position: absolute;
      pointer-events: none;
      background: transparent;
    }

.error,
.error * {
  border-color: orangered !important;
}

  .error *::after {
    background-color: transparent !important;
  }

  .error .floating-label {
    color: orangered !important;
    --color: orangered !important;
  }

  .error .required::before {
    --color: transparent !important;
  }

/* 
.error  {
    margin-bottom: 2em !important;
} */

.error-message {
  position: absolute;
  bottom: -1.5em;
  left: .5em;
  font-size: .85em;
  color: orangered;
}

.floating-label-v2:has(.error-state){
  border-bottom: 2px solid orangered;
  outline-offset: 4px;

  & input {
    border-bottom-color: orangered;
  }
  & span{
    color: orangered !important;
    &::before {
    color: orangered;
  }}

  &::after {
    color: orangered !important;
  }
}