/**
 * _inline-label.scss
 */


/**
 * @atom Input Inline Label
 * @section  _inline-label.scss
 * @description
 *  Label in Input-Feldern
 * @markup
 *  <div class="form-group inlineLabel">
 *    <input type="email" class="form-control form-control-sm" placeholder="john.doe@domain.tld">
 *    <label>E-Mail Adresse:</label>
 *  </div>
 *
 *  <div class="form-group inlineLabel">
 *    <input type="email" class="form-control" placeholder="john.doe@domain.tld">
 *    <label>E-Mail Adresse:</label>
 *  </div>
 *
 *  <div class="form-group inlineLabel">
 *    <input type="email" class="form-control form-control-lg" placeholder="john.doe@domain.tld">
 *    <label>E-Mail Adresse:</label>
 *  </div>
 */
.inlineLabel
{
  position:         relative;
}

.inlineLabel label
{
  position:           absolute;
  display:            inline;
  width:              100%;
  top:                14px;
  left:               0;
  z-index:            4;

  color:              #636C72;
  cursor:             text;

  text-align:         left;
  vertical-align:     top;
  pointer-events:     none;

  overflow:           hidden;
  text-overflow:      ellipsis;
  white-space:        nowrap;

  -webkit-transition: top 250ms ease-out;
  transition:         top 250ms ease-out;
}


.inlineLabel .form-control
{
  padding-top:        12px !important;
  padding-left:       0.75rem;
  padding-right:      0.75rem;
  padding-bottom:     0;
  min-height:         40px;
}
.inlineLabel .form-control ~ label
{
  top:                8px;
  margin:             0;
  padding:            0 0.75rem;
}
.inlineLabel .form-control ~ label.moved
{
  top:                0;
  font-size:          0.7rem;
}


.input-group .form-group.inlineLabel
{
  flex:               1 1 auto;
  width:              1%;
  margin-bottom:      0;
}

.input-group .form-group.inlineLabel .form-control
{
  width:            100%;
}

.input-group .form-group:not(:first-child) .form-control
{
  border-top-left-radius:     0;
  border-bottom-left-radius:  0;
}
.input-group .form-group:not(:last-child) .form-control
{
  border-top-right-radius:    0;
  border-bottom-right-radius: 0;
}
.input-group .form-group:last-child .form-control
{
  border-top-right-radius:    0.25rem;
  border-bottom-right-radius: 0.25rem;
}