@import url(https://fonts.googleapis.com/css?family=Lato);

@mixin label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #457efd;
  transform-origin: left;
  transition: 0.7s cubic-bezier(0.8, 0, 0.25, 1);
}

@mixin input {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 0 0 30px;
  width: 100%;
  height: 100%;
  font-size: 1.2em;
  color: #71798E;
  border: none;
  transform-origin: right;
  transform: scaleX(0.82);
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #e7e5e8;
  font-family: Lato, sans-serif;
}

.login {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14em;
  height: 2.4em;
  color: white;
  font-size: 1.5em;
  text-transform: uppercase;
  border-radius: 0.2em;
  box-shadow:
  0 0px 1.1px -5px rgba(0, 0, 0, 0.042),
  0 0px 2.7px -5px rgba(0, 0, 0, 0.061),
  0 0px 5px -5px rgba(0, 0, 0, 0.075),
  0 0px 8.9px -5px rgba(0, 0, 0, 0.089),
  0 0px 16.7px -5px rgba(0, 0, 0, 0.108),
  0 0px 40px -5px rgba(0, 0, 0, 0.15)
;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  transition: 0.5s;

  svg {
    position: absolute;
    top: 0.6em;
    right: 11.9em;
    transition: 0.5s ease;

    &.email-icon {
      opacity: 0;
    }

    &.password-icon {
      transform: translateY(-100%) scale(0);
    }
  }

  input#email {
    @include input;
    z-index: -2;
  }

  label.email {
    @include label;
    z-index: -1;
  }

  input#password {
    @include input;
    z-index: -4;
  }

  label.password {
    @include label;
    transform: scaleX(0.21);
    z-index: -3;
  }

  span.submit {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
  }

  &.email-input {
    color: transparent;

    label.email {
      transform: scaleX(0.21);
    }

    svg.email-icon {
      opacity: 1;
    }
  }

  &.password-input {
    color: transparent;

    svg.email-icon {
      transform: translateY(100%) scale(0);
    }

    svg.password-icon {
      transform: translateY(0) scale(1);
    }

    label.email {
      display: none;
    }

    input#email {
      display: none;
    }
  }

  &.submit {
    color: transparent;
    pointer-events: none;

    label.password {
      transform: scaleX(1);
    }

    svg.password-icon {
      transform: translateY(100%) scale(0);
    }

    span.submit {
      display: flex;
    }

    label.email {
      display: none;
    }

    input#email {
      display: none;
    }
  }
}
