@import 'src/@fuse/scss/fuse';

signin {
  #signin {
    width: 100%;
    overflow: hidden;
    background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat;
    background-size: cover;

    #signin-intro {
      padding: 128px;

      @include media-breakpoint('sm') {
        padding: 128px 64px;
      }

      .logo {
        width: 128px;
        margin-bottom: 32px;
      }

      .title {
        font-size: 42px;
        font-weight: 300;
        line-height: 1;
      }

      .description {
        padding-top: 16px;
        font-size: 14px;
        max-width: 600px;
      }
    }

    #signin-form-wrapper {
      width: 400px;
      min-width: 400px;
      max-width: 400px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;

      @include mat-elevation(16);

      @include media-breakpoint('sm') {
        width: 360px;
        min-width: 360px;
        max-width: 360px;
      }

      @include media-breakpoint('xs') {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
      }

      #signin-form {
        padding: 128px 48px 48px 48px;

        @include media-breakpoint('xs') {
          text-align: center;
          padding: 24px;
        }

        .logo {
          width: 128px;
          margin: 32px auto;
        }

        .title {
          font-size: 21px;
        }

        .description {
          padding-top: 8px;
        }

        form {
          width: 100%;
          padding-top: 32px;

          mat-form-field {
            width: 100%;

            @include media-breakpoint('xs') {
              width: 80%;
            }
          }

          mat-checkbox {
            margin: 0;
          }

          .remember-forgot-password {
            font-size: 13px;
            margin-top: 8px;

            .remember-me {
              margin-bottom: 16px;
            }

            .forgot-password {
              font-size: 13px;
              font-weight: 600;
              margin-bottom: 16px;
            }
          }

          .submit-button {
            width: 100%;
            margin: 16px auto;
            display: block;

            @include media-breakpoint('xs') {
              width: 80%;
            }
          }
        }

        .separator {
          font-size: 15px;
          font-weight: 600;
          margin: 24px auto;
          position: relative;
          overflow: hidden;
          width: 100px;
          text-align: center;

          .text {
            display: inline-flex;
            position: relative;
            padding: 0 8px;
            z-index: 9999;

            &:before,
            &:after {
              content: '';
              display: block;
              width: 30px;
              position: absolute;
              top: 10px;
              border-top: 1px solid;
            }

            &:before {
              right: 100%;
            }

            &:after {
              left: 100%;
            }
          }
        }

        button {
          &.google,
          &.facebook {
            width: 70%;
            text-transform: none;
            color: #ffffff;
            font-size: 13px;

            @include media-breakpoint('xs') {
              width: 60%;
            }

            mat-icon {
              color: #ffffff;
              margin: 0 8px 0 0;
            }
          }

          &.google {
            background-color: #d73d32;
            margin-bottom: 8px;
          }

          &.facebook {
            background-color: rgb(63, 92, 154);
          }
        }

        .register {
          margin: 32px auto 24px auto;
          width: 250px;
          font-weight: 600;

          .text {
            margin-right: 8px;
          }

          .link {
          }
        }
      }
    }
  }
}
