$borderColor: #979797;
.container{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;

  input{
    height: 50px;
    width: 100%;
    font-size: inherit;
    background: white;
    opacity:1;
    z-index:1;
    border-width: 1px 0;
    border-color: $borderColor;
    &:focus {
      + label{
        z-index:1;
        color: $borderColor;
        transform: translate3d(5%,-100%,0);
      }
    }
  }
  &.filled{
    input{
      z-index: 10;
      + label{
        z-index:1;
        color: $borderColor;
        transform: translate3d(5%,-100%,0);
      }
    }
  }
  label{
    text-transform: capitalize;
    position: absolute;
    transform: translate3d(5%,23%,0);
    transition: 0.2s ease;
    z-index:2;
    color: $borderColor;
    cursor: pointer;
  }
}

.button{
  height: 50px;
  width: 100%;
  align-self: flex-end;
  justify-content: center;
  display: flex;
  color: white;
  background: #0e6aef;
  border: 0;
  z-index: 0;
  cursor: pointer;
  text-transform: uppercase;
  font-size: inherit;
}