tutorbookapp/tutorbook

@use 'styles/sizes';
@use 'styles/common';
@use 'styles/typography';

.wrapper {
  @include common.wrapper(sizes.$form-width-with-margin);
  margin-top: sizes.$header-height * -1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: sizes.$header-height + 24px 24px;

  .content {
    text-align: center;
    max-width: 450px;
  }

  h2 {
    @include typography.typography('headline2');
    margin: 0 0 32px;

    @media (max-width: 400px) {
      @include typography.typography('headline3');
    }
  }

  .divider {
    @include typography.typography('body1');
    border-bottom: 2px solid var(--on-background);
    text-align: center;
    line-height: 0;
    margin: 32px 0;

    span {
      background: var(--background);
      padding: 0 8px;
    }
  }

  :global(.mdc-button) {
    width: 100%;
  }

  :global(.mdc-text-field) {
    margin-bottom: 16px;
    width: 100%;
  }

  .error {
    @include common.error;
  }
}