@import "../../../assets/style/all";

$twitter-blue: #00aced;
$facebook-blue: #3b5998;
$google-orange: #dd4b39;

:host {
  display: block;
  padding-top: 20px;
  @include mq-xs {
    padding-top: 10px;
  }
  .outer > div {
    margin-bottom: 20px;
  }
}

.message {
  font-size: 1.25em;
}

.title {
  text-transform: uppercase;
  font-size: 2.5em;
}

.with {
  font-style: italic;
}

.social-button {
  &.fb {
    background-color: $facebook-blue;

    .fa-facebook-f {
      color: white;
    }

  }

  &.twitter {
    background-color: $twitter-blue;

    .fa-twitter {
      color: white;
    }
  }

  &.github {
    background-color: white;
  }

  &.google {
    background-color: $google-orange;

    .fa-google {
      color: white
    }
  }
}

.mode-toggle {
  color: #0366d6;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }

}

.signup-form, .login-form {
  // width: 80%;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid mat-color($mat-grey, 500);

  @include mq-gt-xs {
    width: 520px;
  }

  & > md-input-container, & > div {
    margin-bottom: 5px;
  }

  .checkboxes {
    margin: 10px 0;
  }

  .your-address {
    .fa {
      cursor: pointer;
      color: mat-color($mat-grey, 500);
    }
  }

  .address-components {
    padding: 5px 10px;
    background-color: mat-color($mat-grey, 300);
    @include mq-gt-sm {
      padding: 5px 20px;
    }
  }

  md-hint, .hint {
    color: #ff5722;
  }

  .hint {
    font-family: Roboto,"Helvetica Neue",sans-serif;
    text-align: right;
    width: 100%;
    font-size: 75%;
  }


}

.submit-button {
  margin-top: 25px;
  &:not([disabled]) {
    color: mat-contrast($mat-green, 700);
    background-color: mat-color($mat-green, 700);
  }
}