/* Animated underline, used by input elements */

.underline-container {
  position: relative;
}

.underlined .base-underline {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  background: #767676;
  height: 1px;
}

.underlined .highlight-underline {
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  background: #ff6200;
  height: 2px;

  transform: scale3d(0, 1, 1);
  -ms-transform: scale3d(0, 1, 1);
  -webkit-transform: scale3d(0, 1, 1);

  transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
}

.underlined[focussed] .highlight-underline {
  width: 100%;

  transition: transform 0.25s;
  -webkit-transition: -webkit-transform 0.25s;

  transform: none;
  -ms-transform: none;
  -webkit-transform: none;
}

.underlined[error] .highlight-underline {
  background: #ff0000;
  transition: transform 0.25s;
  -webkit-transition: -webkit-transform 0.25s;

  transform: none;
  -ms-transform: none;
  -webkit-transform: none;
}