@import '../../../../../../trivia/src/app-variables';

.login-page {
  padding: 20;

  .section-1 {
    margin-top: 70;

    .title-1 {
      font-size: 36;
      color: $title;
      font-weight: bold;
      margin-bottom: 22;
    }

    .title-2 {
      font-size: 20;
      color: $black-title;
      margin-bottom: 27;
    }

    .logo-section {
      margin-bottom: 10;

      .phone-logo {
        width: 48;
        height: 48;
        background-color: $btn-color;
        border-radius: 50%;
        color: $white;
        horizontal-align: center;
        vertical-align: center;
      }

      .icon {
        margin-left: 30%;
        font-size: 20;
      }
    }

    .logo-section>Image {
      margin-right: 30;
      width: 50;
      height: 50;
    }

    .title-3 {
      font-size: 20;
      font-weight: bold;
      color: $black-title;
      margin-bottom: 10;
    }

    .title-4 {
      font-size: 20;
      color: $black-title;
      margin-bottom: 17;
    }
  }

  .section-2 {
    margin-bottom: 38;

    .text-field {
      border: 0;
      border-width: 1;
      border-color: $border-color;
      border-radius: 3;
      margin-bottom: 20;
      padding: 15 20;
      font-size: 24;
      background-color: $white;
    }

    .button-section {
      background-color: $btn-color;
      border-radius: 3;


      >Button {
        background-color: $btn-color;
        color: $white;
        font-size: 20;
        padding: 5;
      }

    }
  }

  .section-3 {

    .text-1 {
      color: $btn-color;
      font-size: 18;
      margin-bottom: 38;
    }

    .text-2 {
      font-size: 20;
      color: $black-title;
      margin-bottom: 16;
    }


    .button-section {
      background-color: $white;
      border-radius: 3;
      border-color: $btn-color;
      border-width: 1;

      >Button {
        background-color: $white;
        color: $btn-color;
        font-size: 20;
        border-color: $btn-color;
        border-width: 0.5;
        border-radius: 3;
      }

      >Label {
        background-color: $white;
        color: $btn-color;
        font-size: 20;
      }

    }
  }

}


.sign-up {
  padding: 20;


  .section-1 {
    margin-top: 10;

    .title-1 {
      font-size: 36;
      color: $title;
      font-weight: bold;
      margin-bottom: 22;
    }

    .title-2 {
      font-size: 20;
      color: $black-title;
      margin-bottom: 27;
    }

  }

  .section-2 {
    margin-bottom: 38;

    .text-field,
    .flag-section {
      border: 0;
      border-width: 1;
      border-color: $border-color;
      border-radius: 3;
      margin-bottom: 20;
      padding: 15 20;
      font-size: 24;
      color: $black;
      background-color: $white;

      >Image {
        width: 30;
        height: 30;
      }
    }

    .icon {
      horizontal-align: right;
      width: 20;
      height: 20;
      margin-right: 10;
      margin-bottom: 20;
    }

    .input-error {
      border-color: $red-dark;
    }


    .terms-text {
      color: $btn-color;
      font-size: 18;
      margin-bottom: 18;

      >Label {
        margin-top: 5;
      }
    }

    .button-section {
      background-color: $btn-color;
      border-radius: 3;


      >Button {
        background-color: $btn-color;
        color: $white;
        font-size: 20;
        padding: 5;
      }

    }

  }


}

.verify-phone {
  background-color: $white;
  padding: 20;
  margin-top: 192;
  border-radius: 20;
  border-width: 1;
  border-color: $white;

  .section-1 {
    margin-top: 10%;

    .title-1 {
      font-size: 24;
      color: $black-title;
      font-weight: bold;
      margin-bottom: 22;
    }

    .title-2 {
      font-size: 18;
      color: $gray-title;
      margin-bottom: 27;
    }

  }

  .section-2 {
    margin-bottom: 26;

    .text-field,
    .flag-section {
      border: 0;
      border-width: 1;
      border-color: $border-color;
      border-radius: 3;
      margin-bottom: 20;
      padding: 15 20;
      font-size: 24;
      color: $black;

      >Image {
        width: 30;
        height: 30;
      }
    }

    .icon {
      horizontal-align: right;
      width: 20;
      height: 20;
      margin-right: 10;
      margin-bottom: 20;
    }

    .input-error {
      border-color: $red-dark;
    }

    .terms-text {
      font-size: 18;
      margin-bottom: 10%;

      .text-1 {
        color: $gray-title;
      }

      .text-2 {
        color: $btn-color;
        horizontal-align: right;
      }
    }

    .button-section {
      background-color: $btn-color;
      border-radius: 3;


      >Button {
        background-color: $btn-color;
        color: $white;
        font-size: 20;
        padding: 5;
      }

    }

  }

  .section-3 {

    .text-field-section {
      margin-left: 5%;
      margin-right: 5%;

      >TextField {
        border: 0;
        border-width: 1;
        border-color: $border-color;
        border-radius: 5;
        margin-bottom: 20;
        padding: 15 20;
        font-size: 24;
        margin-right: 1%;
      }

    }

    .button-section {
      background-color: $btn-color;
      border-radius: 3;


      >Button {
        background-color: $btn-color;
        color: $white;
        font-size: 20;
        padding: 5;
      }

    }

  }


}

.back-button {
  width: 30;
  height: 30;
  horizontal-align: left;
  margin: 15;
}


.hide-layout {
  background-color: $gray-title;
  opacity: 0.7;
}
