$preview-height: 50px;
$preview-width: 300px;
$input-height: 30px;
$input-width: 180px;
$preview-spacing: 30px;

.JoinRoomForm {
  .textLink {
    font-size: 1.1em;
    text-align: center;
    span {
      font-weight: 400;
      font-size: 1.03em;
      color: steelblue;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }

    button {
      color: steelblue;
      font-size: 1.02em;
    }
  }

  .interactiveInput {
    height: $preview-height;
    position: relative;
    width: $preview-width;
    margin: 0 auto;
    margin-top: 20px;

    div {
      display: inline-block;
    }

    .nameInput {
      position: absolute;
      top: ($preview-height - $input-height)/2;
      left:0;
      height: $input-height;
      width: $input-width;
      transform: translate3d(($preview-width - $input-width)/2,0,0);
      transition: transform 500ms ease;

      &.errorState {
        color: #d90000;
      }
    }

    .nameInput.active {
      transform: translate3d($preview-height + $preview-spacing,0,0);
    }
     input {
       font-size: 100%;
       height: 100%;
       width: 100%;
     }
  }

  .joinButtonWrapper {
    text-align: center;
    height: 60px;
    margin-top: 20px;

    .joinButton.glow {
      animation-name: greenPulse;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
  }

  .webcamSettings {
    > .label {
        text-align: center;
        font-size: 1.3em;
        padding-bottom: 3px;
        line-height: 1.6em;
      }
      padding: 10px 0px 8px 0px;
    > .options {
        text-align: center;
        margin: 4px;
        select {
          font-size: 1.1em;
        }
      }
  }
}


.page.get-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;

  .login-info {
    padding: 15px;
    padding-bottom: 0px;
    .greeting {
      line-height: 2.2em;
    }
  }

  .login-container {
    margin-top: 6px;
  }

  .webcamPreview {
    margin-top: 10px;
  }
}
