/* This file is part of the BIMData Platform package.
(c) BIMData support@bimdata.io
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code. */
.base-input-text-material{
  position: relative;
  margin-bottom: 45px;
  input{
    width: 185px !important;
    min-width: 0 !important;
    padding: 10px 10px 10px 5px;
    display: block;
    border: none;
    border-bottom: 1px solid $gray2;
    @include font-size(16px);
  }
  input:focus{ outline: none; }
  label{
    position: absolute;
    left: 0;
    top: 15px;
    color: $gray2;
    font-weight: normal;
    pointer-events: none;
    @include font-size(14px);
    @include transition(.2s ease all);
  }
  /* active state */
  input:focus ~ label,
  input:valid ~ label {
    top: -20px;
    color: $color-primary;
    @include font-size(14px);
  }
  .bar{
    width: 100%;
    position: relative;
    display: block;
    &:before, &:after{
      width: 0;
      height: 1px;
      position: absolute;
      content: '';
      bottom: 0;
      background: $color-primary;
      @include transition(.2s ease all);
    }
    &:before{
      left: 50%;
    }
    &:after{
      right: 50%;
    }
  }
  ///* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after{
    width: 50%;
  }
  .highlight{
    width: 100px;
    height: 60%;
    position: absolute;
    top: 25%;
    left: 0;
    opacity: 0.5;
    pointer-events: none;
  }

  &--error {
    input {
      color: $danger;
      border-color: $danger;
    }
    label {
      color: $danger !important; // override :valid, :focus
    }
    .bar {
      &:before,
      &:after {
        background: $danger;
      }
    }
  }
}
.base-error-text {
  color: $danger;
  font-size: 0.714rem;
}
.base-success-text {
  color: $success;
  font-size: 0.714rem;
}
