@import '../settings';
@import '../common/typography';
@import '../common/colors';
@import '../common/button';
@import '../common/input';

.login {
  width: 420px;
  margin: 0 auto;
  background-color: var(--colorAthensGray);
  border: 2px solid var(--colorMercury);
  border-radius: var(--globalRadius);
}

.waiting {
  .loading {
    display: block;
  }
}

.alternative {
  background: var(--colorWhite);
  padding: 12px 8px;
  font-size: var(--fontMedium);
  text-align: center;
}

.alternative-link {
  color: var(--colorDodgerBlue);
  font-weight: bold;
  cursor: pointer;
}

.loading {
  display: none;
  text-align: center;
  margin: 24px auto;
}

.email-container {
  padding: 16px 12px;
  border-bottom: 2px solid var(--colorMercury);
}

.google-container {
  padding: 16px 12px;
}

.header {}

.heading {
  @apply --subHeading;
  padding: 16px 12px;
  text-align: center;
}

.input {
  @apply --input;
}

.message {
  color: var(--colorCrimson);
  font-size: var(--fontSmall);
}

.button {
  @apply --greenButton;
}

.hint {
  @apply --small;
  color: var(--colorBombay);
}